首页 > 代码库 > JS绑定种类汇总

JS绑定种类汇总

2024-09-15 12:22:08   218人阅读

这里是《你不知道的JS》中常见的this绑定种类分享:

 

1)默认绑定:

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

解析:foo()是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，this指向全局对象

注意:严格模式下与foo()的调用位置无关:引擎会抛出TypeError: this is undefined的异常

 

2)隐式绑定:

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

解析:在这里 foo() 被调用时，落脚点确实指向obj对象，当函数引用有上下文对象时，隐式绑定规则会将函数调用中的this绑定到这个上下文对象，即this.a和obj.a是一样的

注意:对象属性引用链中只有最顶层或者说最后一层会影响调用位置

function foo(){
            console.log(this.a);
        }
        var obj2 = {
            a:42,
            foo:foo
        };
        var obj1 = {
            a:2,
            obj2:obj2
        };
        obj1.obj2.foo();//42

 

3)显式绑定:

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

解析:call() 方法会将第一个参数绑定到this，在调用函数时指定这个this，上面示例即在调用foo时强制把他的this绑定到obj上

注意:显式绑定仍然无法解决丢失绑定问题

 

4)硬绑定:

function foo(){
            console.log(this.a);
        }
        var obj = {
            a:2
        };
        var bar = function(){
            foo.call(obj);
        };
        bar();//2
        setTimeout(bar,100);//2
        //硬绑定的bar不可能再修改它的this
        bar.call(window);//2

解析:在将foo的this强制绑定到obj后，无论之后如何调用bar，都会在obj上调用foo

注意:硬绑定典型应用场景:创建一个包裹函数，传入所有的参数并返回接收到的所有值

function foo(something){
            console.log(this.a,something);//2 3
            return this.a+something;
        }
        var obj = {
            a:2
        };
        var bar = function(){
            return foo.apply(obj,arguments);
        };
        var b = bar(3); 
        console.log(b);//5

由于硬绑定函数是一种非常常用的模式，所以在ES5中提供到了内置的方法:Function.prototype.bind

function foo(something){
            console.log(this.a,something);//2 3
            return this.a+something;
        }
        var obj = {
            a:2
        };
        var bar = foo.bind(obj);
        var b = bar(3);
        console.log(b);//5

注意:bind(...)会返回一个硬编码的新函数，它会把参数设置为this的上下文并调用原始函数

 

5)new绑定:JS中的new的机制实际上和其他面向类的语言完全不同，JS中"构造函数"是一些使用new操作符时被调用的函数

使用new来调用函数，或者说发生构造函数调用时，会执行下面的操作:

#创建(构造)一个全新的对象
#这个新对象会被执行 [[原型]]连接
#这个新对象会绑定到函数调用的this
#如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

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

解析:使用new来调用 foo(...) 时，会构造一个新对象并把它绑定到 foo(...)调用中的this上

 

最后要说的是这几种绑定的优先级:

new绑定>显式绑定>隐式绑定>默认绑定

 

JS绑定种类汇总


联系
我们