javascrip中this指向性问题详解

一、this是谁？

“谁调用他，this就指向谁”，这句话并不全面。

1.全局环境中的this

function f1(){
	console.log(this)
}
function f2(){
	'use strict'
	console.log(this)
}
f1()//window
f2()//undefined

隐式的简单调用函数时，严格模式下this是undefined；非严格模式下this会绑定到全局对象window/golbal上

2.一个简单对象中的this

const person = {
	name:"小红",
	like:function(ev){
		console.log(`${this.name}喜欢${ev}`)
	}
}
person.like("跳皮筋")//小红喜欢跳皮筋

this的执行上下文对象调用。

3.箭头函数中的this

箭头函数中的this是又外层作用域（其所属函数或全局作用域）来决定的。

	const foo = {
        fo: function () {
            setTimeout(function () {
                console.log(this)
            }, 2000)
        }
    }
    foo.fo()//window

	const foo = {
        fo: function () {
            setTimeout( () =>{
                console.log(this)
            }, 2000)
        }
    }
    foo.fo()//{fo: ƒ}即foo

4.构造函数的this和class里的this

他们中的this都会绑定到创建的对象上。

二、如何改变this指向？

1.call，apply，new，bind可以改变this指向，这里的new一个实例当然是重新绑定了this到一个新对象上。
call和apply改变this指向并调用该函数，区别是apply第二个参数是数组，call对后面的参数没有要求。
bind不会执行相关函数，只是返回一个新函数。

	function Hero(name) {
        this.name = name;
        this.hello = function () {
            console.log(`${this.name}说hello`);
        }
    }
    Hero.prototype.hit = function (...args) {
        console.log(args);
        console.log(`${this.name}打${args}`);
    }
    let b = {
        name: "剑圣"
    }
    // console.log(Hero.prototype);
    let a = new Hero("鸟人");
    a.hello.call(b)//剑圣说hello
    a.hit.call(b, {
        id: 123
    }, {
        id: 78222
    })

注意：无论是原型上的方法还是实例上的方法，new出来的实例对象其中this都是可以被call和apply重新指定。

三、浅谈call，apply，new，bind的优先级

下次再写。

是不是很简单啊？喜欢的小伙伴留言点赞关注吧！