JS - this指向

一 this 指向有哪几种

详细可见:https://juejin.cn/post/6844903805587619854 (文章归类this指向为四大类)
https://www.jianshu.com/p/66eb9b21105d

this是什么?this 就是一个指针,指向调用函数的对象。

1.默认绑定:

全局环境中,this默认绑定到window。在不能应用其它绑定规则时使用的默认规则,通常是独立函数调用。

  function test() {
        console.log(this); //window 或 严格模式下是undefined
    }
    setTimeout(function () {
        console.log(this); 
//window setTimeout比较奇怪,默认绑定严格模式下竟然不是undefined
    });
   arr.forEach(function(){
        console.log(this);//window 或严格模式下是undefined
    });
2.隐式绑定:

一般地,被直接对象所包含的函数调用时,也称为方法调用this隐式绑定到该直接对象。典型的形式为 XXX.fun().

function sayHi(){ console.log('Hello,', this.name);}
var person = {
    name: 'YvetteLau', 
       sayHi: sayHi
 }
var name = 'Wiliam';
person.sayHi();// Hello,YvetteLau
3.显式绑定

隐式丢失:隐式丢失是指被隐式绑定的函数丢失绑定对象,从而默认绑定到window。
显式绑定:通过call()、apply()、bind()方法把对象绑定到this上,叫做显式绑定。

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'YvetteLau',
    sayHi: sayHi
}
 var name = 'Wiliam';
 var Hi = person.sayHi;
 Hi.call(person); //Hello, YvetteLau
4.new绑定:

如果函数或者方法调用之前带有关键字new,它就构成构造函数调用。对于this绑定来说,称为new绑定。
a. 构造函数通常不使用return关键字,它们通常初始化新对象,当构造函数的函数体执行完毕时,它会显式返回。在这种情况下,构造函数调用表达式的计算结果就是这个新对象的值。
b. 如果构造函数使用return语句但没有指定返回值,或者返回一个原始值,那么这时将忽略返回值,同时使用这个新对象作为调用结果。
c. 如果构造函数显式地使用return语句返回一个对象,那么调用表达式的值就是这个对象。

new一个对象的过程:
1: 创建一个空对象
2: 设置该对象的__proto__属性为构造函数的原型对象
3: 修改构造函数内部this指针指向新创建的对象
4: 如果构造函数内部返回引用数据类型则返回构造函数中返回值,否则返回新的对象

function sayHi(name){
    this.name = name;
	
}
var Hi = new sayHi('Yevtte');
console.log('Hello,', Hi.name);// Hello, Yevtte

a/b/c看这篇文章:https://www.cnblogs.com/pssp/p/5216085.html

5. es6的箭头函数

window.name = 'win';
const obj1 = {
    name: 'joy',
    getName: () => {
        console.log(this); //window 调用前this是什么函数里面的this就是什么
        console.log(this.name); //win 
    }
};
obj1.getName();

二 绑定优先级

箭头函数 > new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

最后,做些题巩固下:
https://juejin.cn/post/6946021671656488991

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值