美文网首页
关于this

关于this

作者: 1e6c2b3901b0 | 来源:发表于2019-01-20 11:38 被阅读0次

1 this初步

     this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。

1.1 对 this 的误解

  • 容易把 this 理解成指向函数自身
<script type="text/javascript">
function foo(num) {
    console.log("foo: " + num );
    this.count++;
} 
foo.count = 0;
var i; 
for (i=0; i<10; i++) {
    if (i > 5){foo( i );}
} 
console.log(foo.count);
//0
</script>

       在上面,foo是一个函数对象,foo.count为foo添加了一个count属性,其实是window.foo.count=0
       条件语句、循环迭代语句、console.log并不会改变上下文this。因此,在for语句中,this指向window,调用的是window.foo(i),foo中增加的是count是window.count,而不是window.foo.count,foo.count依然为0.
       解决办法是强制 this 指向 foo 函数对象:

<script type="text/javascript">
function foo(num) {
    console.log("foo: " + num );
    this.count++;
} 
foo.count = 0;
var i; 
for (i=0; i<10; i++) {
    if (i > 5){
        foo.call(foo, i ); // 把this指向foo
    }
} 
console.log(foo.count);
//4
</script>
  • 第2种常见的误解是,this 指向函数的作用域
           这个问题有点复杂,因为在某种情况下它是正确的,但有时却是错误的
           首先,这段代码试图通过 this.bar() 来引用 bar() 函数。这是绝对不可能成功的,我们之后会解释原因。调用 bar() 最自然的方法是省略前面的 this,直接使用词法引用标识符。
           此外,编写这段代码的开发者还试图使用 this 联通 foo() 和 bar() 的词法作用域,从而让 bar() 可以访问 foo() 作用域里的变量 a。这是不可能实现的,你不能使用 this 来引用一 个词法作用域内部的东西。
           每当你想要把 this 和词法作用域的查找混合使用时,一定要提醒自己,这是无法实现的。

1.2 this到底是什么

       this 是在\color{red}{运行时进行绑定的},并不是在编写时绑定,它的上下文取决于函数调用时的各种条件。\color{green}{this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。}
       当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包 含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息\color{red}{this} 就是记录的其中一个属性,会在函数执行的过程中用到。

2 调用位置

       调用位置就是函数在代码中\color{red}{被调用的位置}(而不是声明的位置)。只有仔细分析调用位置才能回答这个问题:这个 this 到底引 用的是什么?
       寻找调用位置,最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。

<script type="text/javascript">
function baz() {   
 // 当前调用栈是:baz  ----------------------------2
 // 因此,当前调用位置是全局作用域 
    console.log( "baz" );
    bar(); // <-- bar 的调用位置
}
function bar() { 
    // 当前调用栈是 baz -> bar  ---------------------------- 3
    // 因此,当前调用位置在 baz 中 
    console.log( "bar" );
    foo(); // <-- foo 的调用位置
}
function foo() {
// 当前调用栈是 baz -> bar -> foo  ----------------------------4
 // 因此,当前调用位置在 bar 中
    console.log( "foo" );
} 
baz(); // <-- baz 的调用位置         -----------------1    -------------5
</script>

       另一个查看调用栈的方法 是使用浏览器的调试工具。绝大多数现代桌面浏览器都内置了开发者工具, 其中包含 JavaScript 调试器。
       可以在工具中给 foo() 函数的 第一行代码设置一个断点,或者直接在第一行代码之前插入一条 debugger; 语句。运行代码时,调试器会在那个位置暂停,同时会展示当前位置的函数调用列表,这就是你的调用栈。因此,如果你想要分析 this 的绑定,使用开发者工具得到调用栈,然后找到栈中第二个元素,这就是真正的调用位置。

相关文章

  • 关于关于关于

    他们爱他们自己,不爱你 他们爱你是他们的母亲妻子女儿姐妹 他们不爱你 直到你死的时候,爱才产生,与遗忘同时 那也不...

  • 光明人生

    关于出生 关于成长 关于求学 关于青春期 关于恋爱 关于择业 关于婚姻 关于养生 关于家庭 关于人际 关于教子 关...

  • 「梦雅的简动力」打卡计时65天

    * 关于人生 * 关于梦想 * 关于方向 * 关于创业 * 关于投资 * 关于成败 * 关于个性 * 关于高度 *...

  • 关于

    关于两个人? 关于100步? 关于回头? 关于深情? 关于家庭? 关于孩子? 关于成长? 关于伤痛? 关于怀抱? ...

  • 2017新手妈妈年终总结

    关于购物 关于体重 关于减肥 关于纪念日 关于生活态度 关于上班 关于职场晋升加薪 关于睡眠 关于抱孩子 关于发型...

  • 2018-11-28

    关于流浪、关于随心、关于自由、关于世俗、关于规则、关于坦诚、关于真我、关于好奇心、关于对这整个世界的态度、关于整个...

  • 一首歌的时间

    认真的 想理出点思绪 关于今天关于明天 关于工作关于梦想 关于冬天关于夜晚 关于阳光关于浪花 关于木马关于窗花 关...

  • 最近的各种关于

    关于运动,关于中文阅读,关于英文听力,关于口算。 关于专注,关于目标,关于举家迁移。 关于对正确的过于执着,关于对...

  • 『关于』

    关于雨落,关于天晴; 关于入夜,关于天明; 关于齐眉,关于耳鬓; 关于缘定,关于今生。 (早安~诸君!)

  • 关于关于的关于

    关于这篇文章究竟该起个什么名字,想了很长时间也没答案,于是只能暂且搁置,等到写完之后再说。其实不仅是文章的名字,就...

网友评论

      本文标题:关于this

      本文链接:https://www.haomeiwen.com/subject/jrhxjqtx.html