重学 JS | this 的指向问题

关注

发布于: 2021 年 01 月 10 日

this 并不是 JavaScript 特有的特性，在 c++、java 等面向对象的语言中也存在这个关键字。他们中的 this 很好理解，指向的是当前类的实例对象。那在 JavaScript 中呢，我们先看两个例子：

function Person(name){	this.name = name}
// 1. 当作构造函数调用let p = new Person('程序员')// 输出：程序员// 可以看到实例可以访问到绑定在this上的属性，this指向p实例// 因为new操作符可以改变this指向，详情可以看之前的文章：深入理解Objectconsole.log(p.name) 
// 2. 普通函数调用function Man(name){	this.name = name}Man('程序猿')console.log(window.name) // 程序猿，this指向了window对象，Man函数没有所属对象

复制代码

从例子可以看出，随着函数执行，就会产生一个 this 值，这个 this 值存储着调用该函数的对象的值。因此可以推断，this 指向的永远是函数的调用者。

举几个 this 指向的场景：

函数没有所属对象而直接调用时，this 指向的是全局对象

var val = 1var obj = {	val:2,  method:function(){  	let foo = function(){    	console.log(this.val)    }    foo() // foo函数的执行没有绑定对象，所以this指向window  }}obj.method()  // 1

复制代码

this 指向所属对象

var val = 1var obj = {	val:2,  method:function(){  	console.log(this.val)  }}obj.method() // 2，this指向函数所属对象obj

复制代码

this 指向 call/apply/bind 函数调用后重新绑定的对象

var val = 1var obj = {	val:2}var method = function(){	console.log(this.val)}method() // 1 方法没有绑定对象，执行windowmethod.call(obj)  // 2 ,call将函数调用的主体改为到objmethod.apply(obj) // 2 ,apply将函数指向的主体改为obj
var newM = method.bind(obj) // bind将函数指向的主体改为objnewM() // 2

复制代码

再看个经典的例子：

function f(k){	this.m = k  return this}
var m = f(1)var n = f(2)console.log(m.m) // 2.m  undefindconsole.log(n.m) // 2  window.n.m = window.m = 2

复制代码

f()函数的调用没有所属对象，所以this指向window。

当执行f(1)，this.m = window.m = 1，返回this，即返回window，所以此时window.m = window。

当执行f(2)，this同样指向window，this.m = window.m = 2，通过return语句将window赋值给 n，此时window.n = window。

所以m.m = 2.m ，输出undefined；n.m = (window.n).m = window.m = 2。

至此我们大体学习了 this 的相关指向知识。

里面关于 new 操作符改变 this 指向的问题，可以查看文章：

重学 JS | 深入理解 Object，必会知识点汇总

发布于: 2021 年 01 月 10 日阅读数: 52

原文链接:【http://xie.infoq.cn/article/837381e063581a951ab65cefb】。文章转载请联系作者。

梁龙先森

关注

脚踏V8引擎的无情写作机器 2018.03.17 加入

还未添加个人简介

发布

暂无评论

创作场景

重学 JS | this 的指向问题

梁龙先森

评论