js 学习笔记 (一)

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(); // 3var callfn=function(fn){    fn();}callfn(o.foo);