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的优先级

下次再写。

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

你可能感兴趣的:(javascrip基础知识,javascript,js,bind)