【JS】【this】的指向性问题可以很简单

• Z时代
• 2024-01-10
• 分类：技术分享

//浏览器环境
var name = "outer windows";
function a() {
var name = "inner function";
console.log(this.name);
console.log("inner:" + this);
}
a();
console.log("outer:" + this)

outer windows
inner:[object Window]
outer:[object Window]

//浏览器环境
var name = "outer windows";
function a() {
var name = "inner function";
console.log(this.name);
console.log("inner:" + this);
}
//a()调用变形
this.a(); // 等价于Window.a()
console.log("outer:" + this)

//浏览器环境
var name = "outer windows";
var a = {
name: "1 inner function",
fn : function () {
var name = "2 inner function"
console.log(this.name);
}
}
a.fn();

1 inner function

//浏览器环境
var name = "outer windows";
var a = {
name: "1 inner function",
fn : function () {
var name = "2 inner function"
console.log(this.name);
}
}
var b = a.fn;
b();

outer windows

function () {
var name = "2 inner function"
console.log(this.name);
}

//浏览器环境
var name = "outer windows";
function fn() {
var name = '2 inner function';
a();
function a() {
var name = "2 inner function"
console.log(this.name);
}
}
fn()

outer windows

//浏览器环境
var name = "outer windows";
function a() {
var name = "2 inner function"
console.log(this.name);
}
function fn() {
var name = '2 inner function';
a();
}
fn()

outer windows

  现在已经1202年了，大家大多都富裕，能够用上ES6新特新了，所以对于this的指向问题也没有ES5时期关注了；再者，一般的开发过程中对于函数或者作用域的层级也没有嵌套太深，所以也不常遇到因为this指向不明产生的错误。常在河边走哪能不沾水，接触的项目多了，难免会遇到一些老代码，最好能够了解一下this的指向；再退一步说，面试中this指向可是避不开的点！但是，看到这篇文章只需要记住一句话就能解决所有this指向问题——this永远指向它的左邻调用对象！

一、单层嵌套this指向

//浏览器环境
var name = "outer windows";
function a() {
var name = "inner function";
console.log(this.name);
console.log("inner:" + this);
}
a();
console.log("outer:" + this)

输出结果为：

outer windows
inner:[object Window]
outer:[object Window]

  观察结果，在函数a中即使定义了name变量，输出this.name时显示的是外层定义赋值的outer windows，从这里我们不难看出此时函数a中的this实际上是代表了外层的作用域（该实例中也就是顶层作用域window）；依次在函数内部和外层对this输出，指向同一个对象 window。
  回过头再看开篇的一句话：this永远指向它的左邻调用对象！；该实例代码中函数a在哪里调用，它的左邻又是什么对象呢？我们对代码进行简单转化：

//浏览器环境
var name = "outer windows";
function a() {
var name = "inner function";
console.log(this.name);
console.log("inner:" + this);
}
//a()调用变形
this.a(); // 等价于Window.a()
console.log("outer:" + this)

注意：前面没有调用的对象那么可以默认就是全局对象 this/window，这就相当于是 this/window.a()；

二、多层嵌套this指向

1、形式一

//浏览器环境
var name = "outer windows";
var a = {
name: "1 inner function",
fn : function () {
var name = "2 inner function"
console.log(this.name);
}
}
a.fn();

输出结果为：

1 inner function

  这个结果和你想象的是不是一样的呢？如果你也是这个答案，那么你对this永远指向它的左邻调用对象这句话应该是有了一定理解！同样，我们对上述实例进行解析：最后的函数调用为a.fun()变形后等价于window.a.fn()，函数fn的最左调用对象为对象a，所以函数fn中的this指向其最左的对象a，故this.name为对象a的name属性值。

2、形式二

//浏览器环境
var name = "outer windows";
var a = {
name: "1 inner function",
fn : function () {
var name = "2 inner function"
console.log(this.name);
}
}
var b = a.fn;
b();

输出结果为：

outer windows

  小朋友，你是不是有好多问好？？？相较于形式一，该实例中要区分下变量赋值和函数执行两个概念！分析该实例代码：var b = a.fn; 实际执行的操作是声明全局变量b，并对b进行赋值，赋值为a.fn，也就是说此时b的值实际上是指向

function () {
var name = "2 inner function"
console.log(this.name);
}

当代码执行到b()时才是对上述函数进行了调用执行，同样我们对代码进行补充完整：this/window.b()，this永远指向它的左邻调用对象，此处指向的就是window，其name的属性值为outer windows；为了验证b的实际值，我们不妨对其进行输出：console.log(b):

3、形式三

//浏览器环境
var name = "outer windows";
function fn() {
var name = '2 inner function';
a();
function a() {
var name = "2 inner function"
console.log(this.name);
}
}
fn()

输出结果为：

outer windows

  看完形式一和形式二是不是觉得根据this永远指向它的左邻调用对象，自己对this指向已经了如指掌了！但是看到形式三的例子是不是又有点迷糊！其实一切都离不开this永远指向它的左邻调用对象这句话；对上述代码进行分析：fn() 等价于this/window.fn()所以此时fn中的this指代的是window，在函数fn中又立即调用执行了其作用域中定义的函数a，此时a中的this指向函数fn，前面提到fn的this其实是指向window；所以a中的this其实是指向window的，可以简化为伪代码window.fn().a()，符合this永远指向它的左邻调用对象！

形式四

//浏览器环境
var name = "outer windows";
function a() {
var name = "2 inner function"
console.log(this.name);
}
function fn() {
var name = '2 inner function';
a();
}
fn()

输出结果为：

outer windows

对于形式四大家可以自己进行分析下！

三、总结

  无论代码中有多少层的且套，我们都可以运用this永远指向它的左邻调用对象进行分析得到正确的this指向！最后再重申：this永远指向它的左邻调用对象 ！this永远指向它的左邻调用对象！this永远指向它的左邻调用对象！

以上是 【JS】【this】的指向性问题可以很简单 的全部内容， 来源链接： utcz.com/a/110017.html