js中的this指向问题

时光毁灭记忆、已成空白 提交于 2019-12-04 10:30:21

关于js的this指向问题

一直困扰着我们,并且面试的时候总是喜欢有关this的的问题

讨论this的指向,就要从四个角度来分析看触发this的方式去决定this指向哪里

1.方法调用

var obj = {
    name: '残梦博客园',
    say: function(){
        console.log(this.name)    //残梦博客园
    }
}
obj.say();     //看这里面的this指向,需要看调用他的对象     !!!!所以要看这行!!!

2.函数调用

function getName(){
    console.log(this)    //window
}
getName()     //先写一个函数,然后调用这个函数,就是指向window  

如果在严格模式下,会出现undefined

function getName(){
    `use strict`
    console.log(this)    //undefined
}
getName()     //函数内部为严格模式要求,就出现了undefined

3.new构造函数调用

function Person(name){
    this.name = name
}
var person = new Person('残梦')
var person1 = new Person('博客园')
console.log(person,person1)  //Person {name: "残梦"} Person {name: "博客园"}
// 通过new调用的时候,this就会指向他的实例  什么意思呢?
// var person = new Person('残梦')运行的时候,会调用Person函数,并且把参传递过去,这个时候的this就会指向person

4.call,apply等特殊方式

有的时候我们希望可以自己去修改this的指向,那么就用到了这种方式

function person(){
    name = '残梦博客园'
}
function obj(){
    console.log(this.name)
}
//我们想让obj的this指向person函数
person.call(obj)    //这个单纯的改变指向,没有任何其他作用
//和apply相比,只是参数不一样
obj()      //残梦博客园
//上面我调用了obj这个函数,发现他的this指向了person函数

补充一点,es6的箭头函数,this会指向父元素的this指向

总之一句话,this的指向就看调用他的方式,大体上就是四种方式,但是具体可能还会发生变化,比如es6箭头函数,严格模式等等

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!