this的隐式绑定（implicit binding）

walterrwu 发布于2019-08-19 17:38 / 2375人阅读

摘要：姑且理解为调用域，为调用栈。如下代码可以辅助我们理解在中调用所以的调用域是，此时的调用栈只有而本身暴露在全局作用域中，所以它的调用域则也在全局作用域中。

show code

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2,
    foo: foo
};

obj.foo(); // 2

this指向了obj,因为foo执行时的call-site（可以理解为调用时所在作用域）在obj上面。注意是运行的时候，和在哪里声明的没有关系。

call-site and call-stack

call-site姑且理解为调用域，call-stack为调用栈。如下代码可以辅助我们理解

function baz() {
    // call-stack is: `baz`
    // so, our call-site is in the global scope

    console.log( "baz" );
    bar(); // <-- call-site for `bar`
}

在baz()中调用bar(),所以bar的调用域是baz，此时bar的调用栈只有baz；而baz本身暴露在全局作用域中，所以它的调用域则也在全局作用域中。

function bar() {
    // call-stack is: `baz` -> `bar`
    // so, our call-site is in `baz`

    console.log( "bar" );
    foo(); // <-- call-site for `foo`
}

function foo() {
    // call-stack is: `baz` -> `bar` -> `foo`
    // so, our call-site is in `bar`

    console.log( "foo" );
}

baz(); // <-- call-site for `baz`

理解之后再回头看开头的例子，是不是感觉清晰了很多。其实this只是指向了它的call-site

还有如下玩法：

function foo() {
    console.log( this.a );
}

var obj2 = {
    a: 42,
    foo: foo
};

var obj1 = {
    a: 2,
    obj2: obj2
};

obj1.obj2.foo(); // 42

Implicitly Lost（隐式丢失）

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2,
    foo: foo
};

var bar = obj.foo; // function reference/alias!

var a = "oops, global"; // `a` also property on global object

bar(); // "oops, global"

虽然bar引用了obj上的foo，但实际上相当于是直接对foo引用而已，所以会默认绑定到全局。

function foo() {
    console.log( this.a );
}

function doFoo(fn) {
    // `fn` is just another reference to `foo`

    fn(); // <-- call-site!
}

var obj = {
    a: 2,
    foo: foo
};

var a = "oops, global"; // `a` also property on global object

doFoo( obj.foo ); // "oops, global"

私有云海外云主机隐式绑定 Binding数据绑定 implicit 隐式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78716.html

this绑定方式和优先级比较

摘要：但在严格模式下默认绑定不起作用显式绑定显式绑定用到了和方法，因为可以直接指定的绑定对象，因此称之为显式绑定。隐式绑定显式绑定当我们使用显式绑定时，输出的值为的值所以显式绑定的优先级更高。上篇文章介绍了this的隐式绑定（implicit binding），接着介绍this其他三种绑定方式默认绑定 (Default Binding) 显式绑定 (Explicit Binding) ...

weknow619 2019-08-19 17:42 评论0 收藏0
JS 中的 __proto__ 与 prototype

摘要：在这篇文章中，他介绍了一种实现继承的方法，这种方法并没有使用严格意义上的构造函数。的左值一般是一个对象，右值一般是一个构造函数，用来判断左值是否是右值的实例。 __proto__ 探究 __proto__隐式原型与prototype显式原型是个容易令人混淆的概念，简而言之prototype是构造函数用来被自己的实例继承的原型，而_proto_是实例用来继承父类原型的载体。 1. 是什么...

Donald 2019-08-22 11:14 评论0 收藏0
__proto__ 和 prototype的关系

摘要：和的关系先上答案对象上都有属性函数也是对象一般情况下对象的属性指向该对象的构造函数的原型对象。两者的关系先上一张神图每个被构造函数创建出来的对象都有一个隐式引用，指向其构造函数的属性的值。 showImg(https://segmentfault.com/img/bVbnO8K); __proto__ 和 prototype的关系先上答案：对象上都有__proto__属...

Miracle_lihb 2019-08-23 14:59 评论0 收藏0
前端笔记(一) 变量，执行环境与作用域，this

摘要：浏览器总是运行位于作用域链顶部的当前执行上下文。作用域的前端永远是当前执行代码所在环境的变量对象而全局执行环境的变量对象始终是作用域链中的最后一个对象。调用栈为了达到当前执行位置所调用的所有函数。 ECMAScript中的变量值类型基本类型 : Number, String, Boolean, Undefined, Null 引用类型 : Object, Array, Func...

elva 2019-08-22 14:04 评论0 收藏0
js中的this总结

摘要：关于的指向问题算的上是中的一个十分重要的问题了。首先，的指向问题可以用一句话总结就是总是指向调用的对象，也就是说指向谁与函数声明的位置没有关系，只与调用的位置有关。此外注意几种特殊情况，特别是中的箭头函数。关于this的指向问题算的上是js中的一个十分重要的问题了。今天把这个问题总结下，加深下自己对this的理解。首先，this的指向问题可以用一句话总结就是：this总是指向调用的对...

light 2019-08-20 15:47 评论0 收藏0