JavaScript中this的指向

作者:神秘网友 发布时间:2021-02-25 20:50:09

JavaScript中this的指向


转载地址:

https://note.youdao.com/ynoteshare1/index.htmlid=b2fab3b044aa90033395df0c8c9ca3a4type=note

引子

在JavaScript中this的指向总是让人很困惑,它到底指的啥为了彻底弄清它,我们就来探讨一下吧。this在不同的执行环境,不同的用法下会有所不同,以下分几种情况,讨论this的指向。

this指向分类讨论

this在全局作用域中
// global scope

foo = 'abc';
alert(foo); // abc

this.foo = 'def';
alert(foo); // def

在全局作用域/全局环境(global scope| global context)中,this指向的就是全局变量

  • 在浏览器里,指向window对象
  • 在Node.js里,指向global对象
this在函数(function)里
var boat = {
    size: 'normal',
    boatInfo: function() {
        alert(this === boat);
        alert(this.size);
    }
};

boat.boatInfo(); // true, 'normal'

var bigBoat = {
    size: 'big'
};

bigBoat.boatInfo = boat.boatInfo;
bigBoat.boatInfo(); // false, 'big'

上面这段代码里,this指向谁可以看到,boat对象有一个size属性,和一个boatInfo()方法。在boatInfo()方法里,alert出this是否和boat相等,以及this所指向的size属性。

当我们去用boat.boatInfo()时,可以看到,thisboat是相等的,this.size的值就是boat.size的值nomal

当我们创建一个新的对象,bigBoat,它的size属性为big,但是bigBoat这个对象没有boatInfo()方法,于是我们把boat.boatInfo()的方法赋给了它。然后我们调用bigBoat.boatInfo(),发现this不等于boat,this.size的值为big

this的指向改变了!

The first thing you must realise is that the value of this inside any function is never static, it is always determined every time you call a function, but before the function actually executes it’s code. The value of this inside a function is actually provided by the parent scope in which the function was called, and more importantly, how the actual function syntax was written.

要理解以上的变化,首先要明白,在任何函数中,this的指向都不是静态的(static)。它总是在你调用一个函数,但尚未执行函数内部代码前被指定。(查看参考链接中的执行环境的文章,这个阶段,实际就是初始化变量对象,在初始化变量对象的时候,确定了this的指向)实际上,this是 被调用的函数的父作用域 提供的,更重要的是,我们要看看函数调用时是怎么写的。

当一个函数被调用时,应该立马看()左边的部分。

  • 如果()左边是一个引用(reference),那么,函数的this指向的就是这个引用所属的对象
  • 否则this指向的就是全局对象(window|global)
function bar() {
    alert(this);
}
bar(); // global - because the method bar() belongs to the global object when invoked
// 这里,this指向的是全局对象。我们先看()的左边,是bar,
// 那么bar属于谁呢bar属于全局对象,所以this指向的就是全局对象。

var foo = {
    baz: function() {
        alert(this);
    }
}
foo.baz(); // foo - because the method baz() belongs to the object foo when invoked
// 这里,this指向的是foo,先看()左边是baz,baz属于foo,所以baz里的this指向的就是foo

如果代码都那么简单,那么this的指向也就简单明了了。来点复杂点的看看:

var foo = {
    baz: function() {
        alert(this);
    }
}
foo.baz(); // foo - because baz belongs to the foo object when invoked

var anotherBaz = foo.baz;
anotherBaz(); // global - because the method anotherBaz() belongs to the global object when invoked, NOT foo
// this指向全局对象,()左边是anotherBaz,属于全局对象

可以看到baz()this的指向老是变来变去的。再来看看嵌套在对象里的this的指向

var anum = 0;

var foo = {
    anum: 10,
    baz: {
        anum: 20,
        bar: function() {
            console.log(this.anum);
        }
    }
}
foo.baz.bar(); // 20 - because left side of () is bar, which belongs to baz object when invoked
// ()左边是bar,bar属于foo.baz,所以this就是foo.baz,this.anum = foo.baz.anum = 20

var hello = foo.baz.bar;
hello(); // 0 - because left side of () is hello, which belongs to global object when invoked
// ()左边是hello,hello属于全局对象,所以this指向全局对象,this.anum = window.anum = 0

再来看个例子:

const obj = {
  name: 'spike',
  friends: ['deer', 'cat'],
  loop: function() {
    this.friends.forEach( // 这个this指向obj
      function( friend ) {
        console.log(`${this.name} knows ${friend}`);
        console.log(this === global); // 在node.js环境下,全局对象为global
      }
    )
  }
}

obj.loop();
// ()左边是loop,属于obj,所以loop函数中的this指向obj

输出

$ node test
undefined knows dear
true
undefined knows cat
true

可以看到,在forEach中的this并不是期待的那样指向obj,而是指向全局对象了

可以用上面提到的,还是看()左边,在forEach中,()左边是function,而不是一个引用, 所以this指向的就是全局对象

这里其实我也有点迷惑,当不明白Scope的结构时候,可以通过在浏览器中运行代码,去调试面板查看函数执行时的作用域变化。

在构造函数里的this指向

当使用new关键字去执行构造函数时,构造函数中的this指向的的就是新建的那个对象实例。

  var savedThis;
    function Constr() {
        // 保存构造函数中的this
        savedThis = this;
    }
    // 通过new关键字执行构造函数
    var inst = new Constr();
    
    // 构造函数中的this指向的就是新创建的对象实例inst
    console.log(savedThis === inst); // true

如果你没有用new关键字去执行构造函数,那么就要分析函数被调用时所属的作用域了

    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    var p = Point(7, 5); // 没有用new关键字去执行构造函数!
    
    console.log(p === undefined); // 没有用new,所以构造函数没有返回一个实例对象, 所以p === undefined
    
    // 没有用new关键字,Point(7,5);就只是把函数执行了一遍
    // ()左边是Point,属于全局对象,所以this指向全局对象
    console.log(x); // 7
    console.log(y); // 5
在事件处理器(event handler)中this的指向
div id="test"I am an element with id #test/div

function doAlert() { 
    alert(this.innerHTML); 
} 

doAlert(); // undefined 
// doAlert()属于全局对象

var myElem = document.getElementById('test'); 
myElem.onclick = doAlert; 

alert(myElem.onclick === doAlert); // true 
myElem.onclick(); // I am an element
// ()左边是onclick也就是doAlert,属于myElem,所以this指向myElem

那个元素触发事件,this就指向那个元素

总结

以上,对于函数中的this,通过查看()左边所属的对象去确定,真的很好用。

而实质上,this是在创建函数的执行环境时,在创建阶段确定的,因此,弄透执行环境,去思考执行环境创建阶段的this的指向,this的指向就不会弄错了吧。

参考链接

  • JavaScript’s ‘this’ Keyword
  • JavaScript’s this: how it works, where it can trip you up
  • What is the Execution Context Stack in JavaScript

JavaScript中this的指向 相关文章

  1. JavaScript教程(一):数据类型

    确定值类型:typeof、instanceof、Object.prototype.toString 1、typeof运算符 返回类型:number、string、boolean、undefined、null、object、function 1.1 知识点补充:null 和 undefined的区别 区别: null:表示空值 undefined:未定义 Number(null) //

  2. javascript中的作用域

    前言 本篇是基于对 《你不知道的JavaScript(上卷)》中的第一、二、三、四章的总结理解。 编译原理 在代码执行之前进行的操作叫“编译”,一般有三个步骤: 分词/词法分析:这个操作是将有意义的代码生成词法单元; 解析/语法分析:将词法单元生成为AST(抽

  3. javascript中如何提高扩展运算符的性能

    在这篇文章中,我们会进行一个有趣的测试,看看我们如何提高扩展运算符的性能。 让我们首先简要介绍一下扩展运算符在数组中的工作原理。 扩展运算符,也就是我们常用的三个,让数组展开变成每个小块。 然后使用中括号语法 [] ,重新组装这些小块构造一个新数

  4. JavaScript的算数运算符与比较运算符

    算数运算符 算术运算符以数值(字面量或变量)作为其操作数,并返回一个单个数值。标准算术运算符是加法(+),减法(-),乘法(*)和除法(/)。 算数运算符是用来做算数运算的,如 + 这个符号,就是用来做加法操作。 加法 (+):加法运算符的作用是数值求

  5. Javascript中的事件对象和事件类型

    接上次看JS的事件冒泡和捕获,所以顺带就把 事件 相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处理程序函数在处理事件时,或者说 DOM 在触发

  6. js中对this指向的理解

    牢记:this使在函数执行的时候回才明确他的执行。 先看一下下面的两个例子 例1 var name = "The Window";var object = { name: "My Object", getNameFunc: function () { return function () { return this.name; }; }};console.log(object.getNameFunc()())

  7. nginx使用域名监听80端口,指向不同服务器

    找到nginx.conf编辑 编辑完记得重启 #user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; de

  8. .Net工作流elsa-workflows官方文档学习:JavaScript表达式

    网页:https://elsa-workflows.github.io/elsa-core/docs/expressions-javascript 支持以下 JavaScript 表达式。 变量 任何工作流变量都可以像全局变量一样直接访问。 例如,如果 SetVariable 活动将一个名为 Foo 的变量设置为 Bar,那么可以通过以下方式访

  9. javaScript快速入门

    1、JavaScript面向对象 1.1、面向对象介绍 在 Java 中我们学习过面向对象,核心思想是万物皆对象。 在 JavaScript 中同样也有面向对象。思想类似。 1.2、类的定义和使用 结构说明 代码实现 !DOCTYPE html html lang="en" head meta charset="UTF-8" meta nam

  10. js的执行机制

    转载 js的执行机制 JavaScript语言的一大特点就是 单线程 ,也就是说,同一个时间只能做一件事 多线程的话 JS为什么是单线程的 最初设计JS是用来在浏览器验证表单操控DOM元素的是一门脚本语言,如果js是多线程的,那么两个线程同时对一个DOM元素进行了相互冲

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词