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操作符

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。

原文地址:https://www.cnblogs.com/HJ412/p/12227518.html