js 中this指向问题总结

1、this默认绑定
this默认绑定即函数调用时,无论函数声明在哪,在哪调用,由于函数调用时无任何调用前缀的情景,默认绑定时this指向全局对象(非严格模式):
function fn1() {
let fn2 = function () {
console.log(this); //window
fn3();
};
console.log(this); //window
fn2();
};

function fn3() {
console.log(this); //window
"use strict";
console.log(this); //undefined 严格模式,默认指向undefined
};

fn1();
2、this隐式绑定,如果函数调用时,前面存在调用它的对象,那么this就会隐式绑定到这个对象上
function fn() {
console.log(this.name);
};
let obj = {
name: '听风是风',
func: fn
};
obj.func() //听风是风
如果函数调用前存在多个对象,this指向距离调用自己最近的对象
function fn() {
console.log(this.name);
};
let obj = {
name: '行星飞行',
func: fn,
};
let obj1 = {
name: '听风是风',
o: obj
};
obj1.o.func() //行星飞行
作用域链与原型链的区别:
当访问一个变量时,解释器会先在当前作用域查找标识符,如果没有找到就去父作用域找,作用域链顶端是全局对象window,如果window都没有这个变量则报错。

当在对象上访问某属性时,首选i会查找当前对象,如果没有就顺着原型链往上找,原型链顶端是null,如果全程都没找到则返一个undefined,而不是报错。

2.1在特定情况下会存在隐式绑定丢失的问题,最常见的就是作为参数传递以及变量赋值
var name = '行星飞行';
let obj = {
name: '听风是风',
fn: function () {
console.log(this.name);
}
};

function fn1(param) { //参数传递
param();
};
fn1(obj.fn);//行星飞行,this丢失这里指向了window。
3、this显式绑定,是指我们通过call、apply以及bind方法改变this的行为
let obj1 = {
name: '听风是风'
};
let obj2 = {
name: '时间跳跃'
};
let obj3 = {
name: 'echo'
}
var name = '行星飞行';

function fn() {
console.log(this.name);
};
fn(); //行星飞行
fn.call(obj1); //听风是风
fn.call(undefined); //行星飞行
注意:指向参数提供的是null或者undefined,那么 this 将指向全局对象
4、new绑定
new一个函数究竟发生了什么呢,大致分为三步:
1.以构造器的prototype属性为原型,创建新对象;
2.将this(可以理解为上句创建的新对象)和调用参数传给构造器,执行;
3.如果构造器没有手动返回对象,则返回第一步创建的对象
5、箭头函数的this,箭头函数的this指向取决于外层作用域中的this,一旦箭头函数的this绑定成功,也无法被再次修改,
function fn() {
return () => {
console.log(this.name);
};
}
let obj1 = {
name: '听风是风'
};
let obj2 = {
name: '时间跳跃'
};
let bar = fn.call(obj1); // fn this指向obj1 ,
bar.call(obj2); //听风是风
5.1箭头函数的this也不是真的无法修改,箭头函数的this就像作用域继承一样从上层作用域找,因此可以修改外层函数this指向达到间接修改箭头函数this的目的。
function fn() {
return () => {
console.log(this.name);
};
};
let obj1 = {
name: '听风是风'
};
let obj2 = {
name: '时间跳跃'
};
fn.call(obj1)(); // fn this指向obj1,箭头函数this也指向obj1
fn.call(obj2)(); //fn this 指向obj2,箭头函数this也指向obj2
6、this绑定优先级,如果一个函数调用存在多种绑定方法,this最终指向谁呢?
显式绑定 > 隐式绑定 > 默认绑定
new绑定 > 隐式绑定 > 默认绑定

原文地址:https://www.cnblogs.com/yiran2020/p/14349112.html