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。