js中函数this的指向

this

在面试中，js指向也常常被问到，在开发过程中也是一个需要注意的问题，严格模式下的this指向undefined，这里就不讨论。

普通函数

记住一句话哪个对象调用函数，该函数的this就指向该对象。总指向它的调用者。

obj.getName() 无疑会打印出'黄杰'，b()可以写成window.b()，调用的对象为window，因此访问的name为全局的变量。

var name = '车神'

var obj = {

    name: '黄杰',

    getName: function(){

        console.log(this.name)

    }

}

var b = obj.getName

obj.getName()// '黄杰'

b() // '车神'

但是下面的代码，可能就会有点疑惑了，为什么打印的是undefined，因为全局使用var声明的变量会成为window的属性，而ES6的let、const声明的变量不再是window的属性，通过window.name不能访问该属性。

let name = '车神'

let obj = {

    name: '黄杰',

    getName: function(){

        console.log(this.name)

    }

}

let b = obj.getName

b() // undefined

箭头函数

箭头函数在定义时就决定了this的指向，定义时所处的上下文环境对象即为this的指向，全局的上下文环境对象为window。

有些人认为不应该是两个都是'黄杰吗'？js中的执行上下文有全局、函数、Eval执行上下文，对象并不是执行上下文，因此它会一直往上寻找最近的执行上下文。即为window。

var name = '车神'

var obj = {

    name: '黄杰',

    getName: () =>{

        console.log(this.name)

    }

}

var b = obj.getName

obj.getName()// '车神'

b() // '车神'

new操作符

从这篇文章看到js的new操作符深度解析，new操作符做了以下几件事。this指向了其过程中创建的空对象。

1、创建一个空的简单JavaScript对象（即{}）；

2、链接该对象（即设置该对象的构造函数）到另一个对象；

3、将步骤1新创建的对象作为this的上下文；

4、如果该函数没有返回对象，则返回this。

面试题一

这是我目前看到最有意思的面试题，先思考两分钟...



var length = 100

function foo(){

    console.log(this.length)

}

var obj = {

    length: 10,

    getLength(cb){

        cb()// 打印啥？

        arguments[0]()// 打印啥？

    }

}

obj.getLength(foo, length, obj)

1.答案是100、3。

2.cb()调用的对象为window，arguments[0] ()的调用对象为arguments，它是一个伪数组，也是一个对象，length为函数调用时传递参数的长度，因此打印3。

面试题二

这道题也有点意思，还做错了，先思考两分钟

function foo(xx){

    this.x = xx

    return this

}

var x = foo(5)

var y = foo(6)

console.log(x.x)// 打印啥？

console.log(y.x)// 打印啥？

1.答案是undefined、6，两次调用this都指向window。

2.当执行foo(5)时，得到window.x = window，window.x.x = 5。

3.当执行foo(6)时，this.x = 6相当于window.x = 6，不再是window.x = window，此时window.x并没有x属性，因此通过x.x访问不存在的属性为undefined。

巴特西

js中函数this的指向

this

普通函数

箭头函数

new操作符

面试题一

面试题二

最新文章

热门文章