js学习心得（all、apply、fn、prototype的理解）

这几天按着b.tab.js插件，自己实现了一个基于jquery的cms后端管理界面，运用Sortable.min.js插件实现标签的排序。。。

一、插件的大概布局：运用的是js的---原型模式

$(function(){
    //插件缓存
    //return this.each(function(){}),这里是运用到了jquery的链式操作
    function plugin(options){
    //下面描述  this.each  的作用。this.each返回的是一个jQuery对象，this.each()这里的this也是jquery对象。而each里面的this指的是dom对象。。
        return this.each(function(){
    //这里的this是dom对象
            this.
        })
    }
    //

    //初始化插件
    $.fn.bTabs = plugin;
    //标签新增
    $.fn.bTabsAdd = TabAdd;
    //标签关闭
    $.fn.bTabsClose = TabClose;
    
})(jQuery,window);

//return this.each(function(){})----举例----
<div id="test">
    each test
</div>
<script>
    //无法链式调用,但是这里改为  return this.each(function(str){
                                //});就可以进行链式调用了。。。
    $.fn.init = function(){
    //遍历匹配的元素，此处的this表示对象集合，此处的this表示为jquery对象，而不是dom对象。
        this.each(function(str){
            //这里的this表示的是dom对象。。。
            this.innerHtml = str;
        })
    }
    var newdom = $("#test").init("this add");
    alert(newdom instanceof jQuery);//false
    //此时newdom是undefined，如果我们想要进行链式调用，比如：$("#test").init("this add").css('color','red');这个时候是不起作用的。。。。return this.each(),即后调用each（）方法，而each（）方法返回jQuery对象，所以这样就可以继续链式操作了。。
</script>

①：有关jquery，this，each，fn，prototype的大概意思。。

;(function($,window){
	//$.fn是什么意思？
	//$.fn只是$.prototype原型对象的别名。。。就是$.fn和$.prototype是一样的。。。即向jQuery添加test()方法。。这样所有的jquery对象
	//都可以使用这个test()方法了。。。。
	$.fn.test = function(){
		/*this.css('color','red');//①.测试this是否是jQuery对象
		alert(this instanceof $);//②.测试this是否是jQuery对象
		alert(this[0]);*/
		//为什么这里的this为jQuery对象，因为this永远指向调用该方法（函数）的那个对象（all，apply除外）。。。。下面会介绍call和apply的用法和作用。。。
		this.each(function(){
			//这里的this是dom对象
			alert(this.nodeName);
			this.css('color','red');//这里是无效的，因为这里的this不是jQuery对象，而是属于dom？
			//为什么是dom呢？
			//这个是jquery的里面函数实现了的，只要记住这个dom对象就行。。。。
			//prototype 对象是个模板，要实例化的对象都以这个模板为基础。总而言之，prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。
		})
	}
	
})(jQuery,window);

调用
<script>
    $(this).test();
</script>

②：call和apply的作用。。。


//1.call 和 apply的简单用法：绑定一些函数，用于传参调用。。
//比如 ： Math.max.apply(this,[1,2,3,4]);可以求出最大值。。
//一般来说 this 总是指向调用某个方法的对象，但是再使用call、apply方法的时候，就会改变this的指向
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js" ></script>
		<script type="text/javascript" src="js/mytest.js" ></script>
	</head>
	<body>
		<div>点击我测试</div>
	</body>
	<script>
		$("body *").click(function(){
			$(this).test();
		})
		/*var x = 10;
		var o = {x:15};
		function f(){
            //这里的this指向的是全局作用域中的window对象，所以 this.x 和 window.x 是一样的。
			alert(this.x);
		}
		f();
		f.call(o);*/ //输出：15
		//call();方法它会告诉运行时，f函数中的this指向的是哪个对象。。这里的意思是指向传入的“o”对象？。。
		//首先调用f()将会显示10的对话框，因为this这个时候指向的是全局对象。然后我们调用f函数的call()方法，传入的参数是o，
		//运行结果显示的是o中x属性的值15。call()方法会用它的第一个参数作为f函数的this指针。也就是说，我们会告诉运行时，
		//f函数中的this指向的是哪个对象。
		
		//apply()和call()类似的，只是apply()要求第二个参数必须是一个数组。这个数组会作为参数传递给目标函数。
		var x = 10;
		var o = {x:15};
		function f(message){
			alert(message);
			alert(this.x);
		}
		f('love who?');
		f.apply(o,['i love china','huoyue']);//i love china,15
        //这里看一下 this 的效果。
        f.apply(this,['i love china','huoyue']);//i love china,10,按照上面说的，那么这里的this指向的 f 函数，即f这个对象。。请记住 “指向”，这里的 this即绑定 window.f(),意思是告诉f()函数，你的this指向的就是window。。所以正面的 this.x == window.x = 10;
	</script>
</html>

js学习心得（all、apply、fn、prototype的理解）

猜你喜欢