this指向相关,看这篇就够了

2023-12-21 12:41:28

this指向一直是一个头疼的问题,这篇文章整理了 this 指向面试题相关的内容。

this 指向的绑定规则一共有 5 种

  • 默认绑定
  • 隐式绑定
  • 显示绑定
  • new 绑定
  • ES6 新增箭头函数绑定

1、默认绑定

函数独立调用,无其他绑定规则。 非严格模式下,this指向window,严格模式下,this指向undefined。

1.1 非严格模式

var foo = 123;
function print(){
  this.foo = 234;
    console.log(this); // Window{...}
  console.log(foo); // 234
}
print();

1.2 严格模式

"use strict";
var foo = 123;
function print(){
    console.log('print this is ', this); // print this is undefined
    console.log(window.foo); // Uncaught TypeError: Cannot read property 'foo' of undefined
    console.log(this.foo); // 123
}
console.log('global this is ', this); // global this is Window{...}
print();

2、隐式绑定

满足XXX.fn()格式,fn的this指向XXX。如果存在链式调用,this永远指向最后调用它的那个对象。
2.1 隐式绑定

var a = 1;
function foo() {
    console.log(this.a); 
}
// 对象简写,等同于 {a:2, foo: foo}
var obj = {a: 2, foo}
foo(); // 1
obj.foo(); // 2

2.2 隐式绑定的丢失
!!! 隐式绑定丢失后、this的指向会启动默认绑定。
隐式绑定丢失的两种情况:
(1)使用另一个变量作为函数别名,之后使用别名执行函数。

var a = 1
var obj = {
    a: 2,
    foo() {
        console.log(this.a)
    }
}
var foo = obj.foo;
obj.foo(); // 2
foo(); // 1

(2)将函数作为参数传递时。

function foo() {
  console.log(this.a)
}
function doFoo(fn) {
  console.log('print this is', this)
  fn()
}
var obj = { a: 1, foo }
var a = 2
doFoo(obj.foo) // print this is Window{...}   2

3、显示绑定

通过call、apply、bind 函数改变this 指向,但是使用起来也有差别:
call()、apply()函数会立即执行,
bind()不会立即执行,会返回一个新函数,
call()、apply()的区别在于 call接收若干个参数、apply接收数组。
3.1 三种方式调用

function foo () {
  console.log(this.a)
}
var obj = { a: 1 }
var a = 2

foo() // 2
foo.call(obj) // 1
foo.apply(obj) // 1
foo.bind(obj) // 不会立即执行,所以没有返回值

3.2 隐式绑定丢失可通过call、apply找回

function foo() {
  console.log(this.a)
}
function doFoo(fn) {
  console.log('print this is', this)
  fn.call(this)
}
var obj = { a: 1, foo }
var a = 2
doFoo(obj.foo) // print this is {a: 1, foo}   1

3.3 注意call位置

function foo () {
    console.log(this.a)
}
var obj = { a: 1 }
var a = 2

foo() // 默认绑定 2
foo.call(obj) // 显式绑定 1
foo().call(obj) // foo()函数执行 显式绑定,打印1, 对foo()执行的返回值执行call,foo返回值为undefined,执行call()会报错Uncaught TypeError: Cannot read property 'call' of undefined

3.4 外层this与内层this

function foo () {
    console.log(this.a)
    return function() {
        console.log(this.a)
    }
}
var obj = { a: 1 }
var a = 2
foo.call(obj)() // 1 2
// foo.call(obj): 第一层函数foo通过call将this指向obj,打印1;第二层函数为匿名函数,默认绑定,打印2。

3.5 显式绑定扩展
(1)apply 数组求最大值、最小值

const arr = [1,11,33]
Math.max.apply(Math, arr)
Math.min.apply(Math, arr)

(2)类数组转为数组,采用Array.prototype.slice.call(arguments)或[].slice.call(arguments)将类数组转化为数组。
(3)数组高阶函数,我们会经常用到forEach、map等,但这些数组高阶方法,它们还有第二个参数thisArg,每一个回调函数都是显式绑定在thisArg上的。

const obj = {a: 2}
const arr = [1, 2]
arr.forEach(function (val, key){
    console.log(`${key}: ${val} --- ${this.a}`)
}, obj)

// 0:1 --- 2
// 1:2 --- 2

4、new 绑定

使用new 构建函数分为以下几个步骤:

  1. 创建一个简单的空JavaScript对象
  2. 为新创建的对象添加__proto__ 属性,该属性链接构造函数的原型对象
  3. 将新创建的对象作为this 的上下文
  4. 如果该函数没有返回对象,则返回this

4.1 new 绑定

function User(name, age) {
    this.name = name;
    this.age = age;
}
var name = 'Tonny';
var age = 12;

var zc = new User('Tom', 18);
console.log(zc.name) // Tom

5、ES6 箭头函数绑定

箭头函数没有自己的this,所以它查找到外层的this 值作为自己的 this值,且指向函数定义时的this而非执行时。
箭头函数不能用作构造函数;没有arguments 对象,要用rest参数;没有原型对象prototype;不能使用call、apply、bind改变this指向。

name = 'Jonny'
const obj = {
    name: 'Tom',
    intro: () => {
        console.log('My name is ' + this.name)
    }
}
obj.intro() // Jonny

最后:综合题

var name = 'window'
var user1 = {
    name: 'user1',
    foo1: function () {
        console.log(this.name)
    },
    foo2: () => console.log(this.name),
    foo3: function () {
        return function () {
            console.log(this.name)
        }
    },
    foo4: function () {
        return () => {
            console.log(this.name)
        }
    }
}
var user2 = { name: 'user2' }

user1.foo1()
user1.foo1.call(user2)

user1.foo2()
user1.foo2.call(user2)

user1.foo3()()
user1.foo3.call(user2)()
user1.foo3().call(user2)

user1.foo4()()
user1.foo4.call(user2)()
user1.foo4().call(user2)

综合题答案分析:
user1.foo1() 隐式绑定 user1
user1.foo1.call(user2) 显示绑定 user2

user1.foo2() 箭头函数 window
user1.foo2.call(user2) 箭头函数call 改变无效 window

user1.foo3()() 默认绑定 window
user1.foo3.call(user2)() 第一层user1.foo3.call(user2)使用call将user1.foo3的this指向user2,第二层匿名函数默认绑定,打印 window
user1.foo3().call(user2) 第一层 user1.foo3() 隐式绑定,第二层匿名函数使用call将this指向user2,打印 user2

user1.foo4()() 第一层 user1.foo3() 隐式绑定,第二层匿名函数 默认绑定,打印 user1
user1.foo4.call(user2)() 第一层user1.foo4.call(user2)使用call将user1.foo4的this指向user2,第二层箭头函数 向上查找,打印 user2
user1.foo4().call(user2) 第一层 user1.foo4() 隐式绑定,第二层箭头函数使用call将this指向user2无效 向上查找,打印 user1

希望以上内容对大家有帮助

~~旨在分享

文章来源:https://blog.csdn.net/weixin_43978501/article/details/135124912
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。