争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

ECMA Javascript中this的深入理解(附示例)

时间:2024/5/2作者:未知来源:争怎路由网人气:

global))?obj : this curried.concat.apply( curried, arguments ) ); }; bound.prototype = Object.create( fn.prototype ); return bound; };

4. new 绑定

当一个函数用作构造函数时(使用new关键字),它的this被绑定到正在构造的新对象。(MDN)
使用 new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作(你不知道的JS)

  1. 创建(或者说构造)一个全新的对象。

  2. 这个新对象会被执行 [[ 原型 ]] 连接。

  3. 这个新对象会绑定到函数调用的 this 。

  4. 如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象。

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

四条规则优先级

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

  1. 函数是否在 new 中调用( new 绑定)?如果是的话 this 绑定的是新创建的对象。

     var bar = new foo()
  2. 函数是否通过 call 、 apply (显式绑定)或者硬绑定调用?如果是的话, this 绑定的是指定的对象。
    另外:如果绑定 null 或者 undefined ,实际应用的是默认绑定规则。

     var bar = foo.call(obj2)
  3. 函数是否在某个上下文对象中调用(隐式绑定)?如果是的话, this 绑定的是那个上下文对象。

     var bar = obj1.foo()
  4. 如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到 undefined ,否则绑定到全局对象。

     var bar = foo()

    其中:间接引用函数会应用默认绑定规则

    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)(); // 2

例外

1. 箭头函数

箭头函数不使用 this 的四种标准规则,而是根据外层(函数或者全局)作用域来决定 this 。
在箭头函数中,this与封闭词法上下文的this保持一致。(MDN)
箭头函数会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。这其实和self = this 机制一样。
箭头函数的绑定无法被修改。

2. nodejs

setTimeout(function() { 
    console.log(this) 
    //浏览器中:window 
    //nodejs中:Timeout实例
}, 0)

其他解释

https://www.zhihu.com/questio...
func(p1, p2) 等价于
func.call(undefined, p1, p2)

obj.child.method(p1, p2) 等价于
obj.child.method.call(obj.child, p1, p2)

如果你传的 context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)

例子

    var number = 50;
    var obj = {
        number: 60,
        getNum: function () {
        var number = 70;
        return this.number;
    }
    }; 

    alert(obj.getNum());
    alert(obj.getNum.call());
    alert(obj.getNum.call({number:20}));

以上就是ECMA Javascript中this的深入理解(附示例)的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:ECMA Javascript中this的深入理解(附示例)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版