js this 学习笔记

默认绑定

var foo=function(){ console.log(this.a); } var a=2; foo();//2

隐式绑定

//demo1: var foo=function(){ console.log(this.a); } var object={ a:2, foo:foo } object.foo();//2 //demo2:具有多层嵌套 var foo=function(){ console.log(this.a); } var object_deep1={ a:2, foo:foo } var object_deep2={ a:1, object_deep1:object_deep1 } object_deep2.object_deep1.foo();//2

显式绑定

//demo1:硬绑定 //绑定工具方法 var bind=function (fn,object){ return function(){ return fn.apply(object,arguments); } } var foo=function(){ console.log(this.a); } var bar=bind(foo,{a:2}); bar();//2 //demo2:new绑定 var foo=function(a){ this.a=a; } var bar=new foo(2); console.log(bar.a);//2 //demo3:new 绑定和 硬绑定结合使用 function foo(p1,p2,p3) { this.val = p1 + p2+p3; } var bar = foo.bind(null,"1","2"); var baz = new bar( "4","5"); console.log(baz.val) // bind 可以预先绑定前几个参数 再通过new 塞入余下参数 //demo4:一般的 我们应该这么使用 function foo(a,b) { this.val=a+b; } //Object.create( null )比{} 都是创建一个空对象 但是Object.create(null)并不会创建Object.prototype这个委托 var bar = foo.bind( Object.create( null ), 2 ); var baz=new bar('3'); console.log(baz.val) //demo5:软绑定 if (!Function.prototype.softBind) { Function.prototype.softBind = function(obj) { var fn = this; // 捕获所有 curried 参数 var curried = [].slice.call( arguments, 1 ); var bound = function() { console.group("_"); console.log("obj:"); console.log(obj); console.log("this:"); console.log(this); console.log((!this || this === (window || global)) ?obj : this) console.groupEnd(); //假如是window||global||undefined 那么 this 就变更成obj //但是我们假如这样写 var baz=foo.softBind(object1).softBind(object2); // 表面上先 将object1绑定了 再将object2绑定了 但实际上先调用了object2的回调 //所以其作用并不是 无法重复绑定 而是只使用最后一次绑定 return fn.apply((!this || this === (window || global)) ? obj : this, curried.concat.apply( curried, arguments ) ); }; bound.prototype = Object.create( fn.prototype ); return bound; }; } var object={ a:2 } var bar={ a:3, foo:foo } var foo=function(){ console.log(this.a); console.log(arguments); } var baz=foo.softBind(object,1); bar.foo();

箭头绑定

function foo() { // 返回一个箭头函数 return (a) => { //this 继承自 foo() console.log( this.a ); }; } var obj1 = { a:2 }; var obj2 = { a:3 }; var bar = foo.call( obj1 ); bar.call( obj2 ); // 2, 不是 3 ！

列外情况 (间接引用)

//demo1: function foo() { console.log( this.a ); } var a = 2; var o = { a: 3, foo: foo }; var p = { a: 4 }; o.foo(); // 3 (p.foo = o.foo)(); // 间接引用 //demo2:同样的 回调函数也是间接引用 function foo() { console.log( this.a ); } var a = 2; var o = { a: 3, foo: foo }; var p = { a: 4 }; o.foo(); // 3 var callfn=function(fn){ fn(); } callfn(o.foo);