资讯专栏INFORMATION COLUMN

this其实很简单

TerryCai / 2409人阅读

摘要:来点规则,有规可寻我们必须考察调用点,来判断下面即将要说的四中规则哪一种适用。所以,在回调函数中丢失绑定是一件很常见的事情,但是还有另一种情况,接受我们回调的函数故意改变的值。

此文主要总结于《你不知道的JavaScript 上卷》,虽然讲解this的文章已经烂大街了,但是依旧希望,这篇文章可以帮助到那些还是对this有些疑惑的哥们

前言

this关键字是JavaScript中最复杂的机制之一,它不是一个特殊的关键字,被自动定义在所有的函数作用域中。

老规矩,我们直接看例子:

function identify(){
    console.log(this.name)
    return this.name.toUpperCase();
}

function speak() {
  var gretting = "Hello I am "+identify.call(this)
  console.log(gretting);
}

var me = {
    name:"Neal"
}

var you = {
    name:"Nealyang"
}
identify.call(me);
identify.call(you);

speak.call(me);
speak.call(you);

关于运行结果大家可以自行运行查看,如果对于this是如何工作的这里我们还是存在疑惑,那么别急,我们后面当然会继续深入探讨下,这里,先说下关于this
的一些误解的地方

关于this的误解 this 值得是它自己

通常新手都会认为this就是指向函数本身,至于为什么在函数中引用他自己呢,可能就是因为递归这种情况的存在吧。但是这里,我想说,this并不是指向函数本身的

function foo(num) {
  console.log("foo:"+num);
  this.count++;
}

foo.count = 0;

for(var i = 0;i<10;i++){
    foo(i);
}

console.log(foo.count);

通过运行上面的代码我们可以看到,foo函数的确是被调用了十次,但是this.count似乎并没有加到foo.count上。也就是说,函数中的this.count并不是foo.count。

所以,这里我们一定要记住一个,就是函数中的this并不是指向函数本身的。上面的代码修改如下:

function foo(num) {
  console.log("foo:"+num);
  this.count++;
}

foo.count = 0;

for(var i = 0;i<10;i++){
    foo.call(foo,i);
}

console.log(foo.count);

运行如上代码,此时我们就可以看到foo函数中的count的确已经变成10了

this值得是他的作用域

另一种对this的误解是它不知怎么的指向函数的作用域,其实从某种意义上来说他是正确的,但是从另一种意义上来说,这的确是一种误解。

明确的说,this不会以任何方式指向函数的词法作用域,作用域好像是一个将所有可用标识符作为属性的对象,这从内部来说他是对的,但是JavaScript代码不能访问这个作用域“对象”,因为它是引擎内部的实现。

function foo() {
    var a = 2;
    this.bar();
}

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

foo(); //undefined

上面的代码不止一处错误,这里不做讨论,仅仅用于看代码,首先,视图this.bar()来视图访问bar函数,的确他做到了。虽然只是碰巧而已。然而,写下这段代码的开发者视图使用this在foo和bar的词法作用域中建立一座桥,是的bar可以访问foo内部变量作用域a。当然,这是不可能的,不可能使用this引用在词法作用域中查找东西。

什么是this

所以说了这么coder对this的误解,那么究竟什么是this呢。记住,this不是在编写时候绑定的,而是在运行时候绑定的上下文执行环境。this绑定和函数申明无关,反而和函数被调用的方式有关系。

当一个函数被调用的时候,会建立一个活动记录,也成为执行环境。这个记录包含函数是从何处(call-stack)被调用的,函数是 如何 被调用的,被传递了什么参数等信息。这个记录的属性之一,就是在函数执行期间将被使用的this引用。

彻底明白this到底值得什么鬼 调用点

为了彻底弄明白this的指向问题,我们还必须明白什么是调用点,即一个函数被调用的位置。考虑调用栈(即使我们到达当前执行位置而被d调用的所有方法堆栈)是非常重要的,我们关心的调用点就是当前执行函数的之前的调用

function baz() {
    // 调用栈是: `baz`
    // 我们的调用点是global scope(全局作用域)

    console.log( "baz" );
    bar(); // <-- `bar`的调用点
}

function bar() {
    // 调用栈是: `baz` -> `bar`
    // 我们的调用点位于`baz`

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

function foo() {
    // 调用栈是: `baz` -> `bar` -> `foo`
    // 我们的调用点位于`bar`

    console.log( "foo" );
}

baz(); // <-- `baz`的调用点

上面代码大家简单感受下什么是调用栈和调用点,比较简单的东西。

来点规则,有规可寻

我们必须考察调用点,来判断下面即将要说的四中规则哪一种适用。先独立解释下四中规则的每一种,然后再来说明下如果多种规则适用调用点时他们的优先级。

默认绑定

所谓的默认绑定,就是独立函数的调用形式。

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

var a = 2;

foo(); // 2

为什么会是2呢,因为在调用foo的时候,JavaScript对this实施了默认绑定,所以this就指向了全局对象。

我们怎么知道这里适用 默认绑定 ?我们考察调用点来看看foo()是如何被调用的。在我们的代码段中,foo()是被一个直白的,毫无修饰的函数引用调用的。没有其他的我们将要展示的规则适用于这里,所以 默认绑定 在这里适用。

需要注意的是,对于严格模式来说,默认绑定全局对象是不合法的,this被置为undefined。但是一个很微妙的事情是,即便是所有的this绑定规则都是基于调用点的,如果foo的内容没有严格模式下,默认绑定也是合法的。

隐含绑定

调用点是否有一个环境对象,也成为拥有者和容器对象。

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

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

obj.foo(); // 2

foo被申明,然后被obj添加到其属性上,无论foo()是否一开始就在obj上被声明,还是后来作为引用添加(如上面代码所示),都是这个 函数 被obj所“拥有”或“包含”。

这里需要注意的是,只有对象属性引用链的最后一层才影响调用点

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

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

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

obj1.obj2.foo(); // 42
隐含绑定丢死

this绑定最让人头疼的地方就是隐含绑定丢失了他的绑定,其实明确了调用位置,这个也不是难点。直接看代码

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

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

var bar = obj.foo; // 函数引用!

var a = "oops, global"; // `a`也是一个全局对象的属性

bar(); // "oops, global"

所以如上的调用模式,我们又退回到了默认绑定模式。

还能hold住,那么接着看代码:

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

function doFoo(fn) {
    // `fn` 只不过`foo`的另一个引用

    fn(); // <-- 调用点!
}

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

var a = "oops, global"; // `a`也是一个全局对象的属性

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

参数传递,仅仅是一种隐含的赋值,而且因为我们是传递一个函数,他是一个隐含的引用赋值,所以最终结果和我们前一段代码一样。

所以,在回调函数中丢失this绑定是一件很常见的事情,但是还有另一种情况,接受我们回调的函数故意改变this的值。那些很受欢迎的事件处理JavaScript包就十分喜欢强制你的回调的this指向触发事件的DOM元素。

不管哪一种意外改变this的方式,你都不能真正地控制你的回调函数引用将如何被执行,所以你(还)没有办法控制调用点给你一个故意的绑定。我们很快就会看到一个方法,通过 固定 this来解决这个问题。

如上,我们一定要清除的是引用和调用。记住,找this,我们只看调用,别被引用所迷惑

明确绑定

在JavaScript中,我们可以强制制定一个函数在运行时候的this值。是的,call和apply,他们的作用就是扩充函数赖以生存的作用域。

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

var obj = {
    a: 2
};

foo.call( obj ); // 2

上面代码,我们使用foo,强制将foo的this指定为obj

如果你传递一个简单原始类型值(string,boolean,或 number类型)作为this绑定,那么这个原始类型值会被包装在它的对象类型中(分别是new String(..),new Boolean(..),或new Number(..))。这通常称为“boxing(封箱)”。

但是,多带带的依靠明确绑定仍然不能为我们先前提到的问题,提供很好的解决方案,也就是函数丢失自己原本的this绑定。

硬性绑定
function foo() {
    console.log( this.a );
}

var obj = {
    a: 2
};

var bar = function() {
    foo.call( obj );
};

bar(); // 2
setTimeout( bar, 100 ); // 2

// `bar`将`foo`的`this`硬绑定到`obj`
// 所以它不可以被覆盖
bar.call( window ); // 2

我们创建了一个函数bar(),在它的内部手动调用foo.call(obj),由此强制this绑定到obj并调用foo。无论你过后怎样调用函数bar,它总是手动使用obj调用foo。这种绑定即明确又坚定,所以我们称之为 硬绑定(hard binding)

new 绑定

这个比较简单,当函数前面加入new关键字调用的时候,其实就是当做构造函数调用的。其内部其实完成了如下事情:

一个新的对象会被创建

这个新创建的对象会被接入原型链

这个新创建的对象会被设置为函数调用的this绑定

除非函数返回一个他自己的其他对象,这个被new调用的函数将自动返回一个新创建的对象

总结性来一波

函数是否在new中调用,如果是的话this绑定的是新创建的对象

var bar = new Foo();

函数是否通过call、apply或者其他硬性调用,如果是的话,this绑定的是指定的对象

var bar = foo.call(obj);

函数是否在某一个上下文对象中调用,如果是的话,this绑定的是那个上下文对象

var bar = obj.foo();

如果都不是的话,使用默认绑定,如果在严格模式下,就绑定到undefined,注意这里是方法里面的严格声明。否则绑定到全局对象

var bar = foo();
绑定例外

第一种情况就是将null和undefined传给call、apply、bind等函数,然后此时this采用的绑定规则是默认绑定

第二种情况这里举个例子,也是面试中常常会出现的例子

function foo() {
  console.log(this.a);
}
var a = 2;
var o = {
    a:3,
    foo:foo
}
var p = {a:4};
(p.foo = o.foo)();

如上调用,其实foo采用的也是默认绑定,这里我们需要知道的是,p.foo = o.foo的返回值是目标函数的引用,所以最后一句其实就是foo()

es6中的箭头函数

es6中的箭头函数比较简单,由于箭头函数并不是function关键字定义的,所以箭头函数不适用this的这四中规则,而是根据外层函数或者全局作用域来决定this

function foo() {
  // 返回一个arrow function
    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!

这里foo内部创建的箭头函数会自动获取foo的this。

来一道经典面试题吧

第一题

var a=10;
var foo={
  a:20,
  bar:function(){
      var a=30;
      console.log(this)
      return this.a;
    }
};
foo.bar()
(foo.bar)()
(foo.bar=foo.bar)()
(foo.bar,foo.bar)()

第二题

function t(){
this.x=2;
}
t();
console.log(window.x);

第三题

var obj = {
x: 1,
y: 2,
t: function() {
console.log(this.x)
}
}
obj.t();

var dog={x:11};
dog.t=obj.t;
dog.t();


show=function(){
console.log("show"+this.x);

}

dog.t=show;
dog.t();

第四题

name = "this is window";
var obj1 = {
name: "php",
t: function() {
console.log(this.name)
}
};
var dog1 = {
name: "huzi"
};

obj1.t();

dog1.t = obj1.t;

var tmp = dog1.t;
tmp(); //this本来指向window

(dog1.t = obj1.t)();
dog1.t.call(obj1);

第五题

var number=2;
var obj={
number:4,
/*匿名函数自调*/
fn1:(function(){
var number;
this.number*=2;//4

number=number*2;//NaN
number=3;
return function(){
var num=this.number;
this.number*=2;//6
console.log(num);
number*=3;//9
alert(number);
}
})(),

db2:function(){
this.number*=2;
}
}

var fn1=obj.fn1;

alert(number);

fn1();

obj.fn1();

alert(window.number);

alert(obj.number);
交流

扫码关注我的个人微信公众号,分享更多原创文章。点击交流学习加我微信、qq群。一起学习,一起进步。共同交流上面的题目吧

欢迎兄弟们加入:

Node.js技术交流群:209530601

React技术栈:398240621

前端技术杂谈:604953717 (新建)

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

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

相关文章

  • 40 行代码内实现一个 React.js

    摘要:代码托管这个仓库。假设现在我们需要实现一个点赞取消点赞的功能。如果你对前端稍微有一点了解,你就顺手拈来点赞为了现实当中的实际情况,所以这里特易把这个的结构搞得稍微复杂一些。这里非常暴力地使用了,把两个按钮粗鲁地插入了当中。 作者:胡子大哈原文链接:http://huziketang.com/blog/posts/detail?postId=58aea515204d50674934c3a...

    twohappy 评论0 收藏0
  • React 导读(一)

    摘要:需要有一定的基础和的使用经验。这就是属性的作用。方法接收一个新对象来重新赋值。也接收一个函数,这个回调函数这里我默认有一个参数,表示之前的的值,这个函数的返回值就是最新的。但是不同的是在组件内部是只读的。 前言 写这篇文章的主要目标是让初学者更快的上手 React 的项目开发,能有一个循循渐进的理解过程。需要有一定的 JavaScript 基础和 NPM 的使用经验。不多说了,下面会按...

    kumfo 评论0 收藏0
  • 十分钟快速了解《你不知道的 JavaScript》(上卷)

    摘要:最近刚刚看完了你不知道的上卷,对有了更进一步的了解。你不知道的上卷由两部分组成,第一部分是作用域和闭包,第二部分是和对象原型。附录词法这一章并没有说明机制,只是介绍了中的箭头函数引入的行为词法。第章混合对象类类理论类的机制类的继承混入。 最近刚刚看完了《你不知道的 JavaScript》上卷,对 JavaScript 有了更进一步的了解。 《你不知道的 JavaScript》上卷由两部...

    赵春朋 评论0 收藏0
  • vuex其实简单,只需3步

    摘要:每一条被记录,都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中中的异步函数中的回调让这不可能完成因为当触发的时候,回调函数还没有被调用,不知道什么时候回调函数实际上被调用实质上任何在回调函数中进行的状态的改变都是不可追踪的。 前言 之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术选型上选用了 v...

    binta 评论0 收藏0
  • vuex其实简单,只需3步

    摘要:每一条被记录,都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中中的异步函数中的回调让这不可能完成因为当触发的时候,回调函数还没有被调用,不知道什么时候回调函数实际上被调用实质上任何在回调函数中进行的状态的改变都是不可追踪的。 前言 之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术选型上选用了 v...

    summerpxy 评论0 收藏0

发表评论

0条评论

TerryCai

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<