JavaScript 之 this 对象

87 阅读1分钟

定义

this 对象是在运行时基于函数的执行环境绑定的。在全局函数中,this 等于 window,而当函数被作为某个对象的方法调用时,this 等于那个对象

全局环境

在全局环境中定义的函数,此时this就是window

var name = "window";
function getName(){
  var name = 'fn name'
  console.log(this.name);
}

getName() // window

对象方法

作为对象方法调用,this就是 obj 这个对象

var name = 'window'

var obj = {
  name:'obj name',
  getName(){
    return this.name
  }
}

console.log(obj.getName()); // obj name

在闭包中使用this对象又有不同

var name = 'window'

var obj = {
  name:'obj name',
  getName(){
    return function (){
      return this.name
    }
  }
}

console.log(obj.getName()()); // window

上面代码中,getName()不再是返回字符串了,而是返回一个匿名函数。然后我们在全局环境中调用,this 就变成了 window。

不过,我们可以把外部作用域的this对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了。

var name = 'window'

var obj = {
  name:'obj name',
  getName(){
    var that = this
    return function (){
      return that.name
    }
  }
}

console.log(obj.getName()()); // obj name

引用传递丢失

将对象方法赋值个一个变量在进行调用,此时 this 就变成了 window

var name = 'window'

function sayName(){
  console.log(this.name);
}

var obj = {
  name : 'obj name',
  sayName:sayName
}

obj.sayName()               // obj name
var sayName = obj.sayName
sayName()                   // window

构造函数

构造函数中使用,this 就是这个实例对象

function Person(name){
  this.name = name
  this.getName = function(){
    console.log(this.name);
  }
}

var person1 = new Person('jack')
person1.getName() // jack

显示修改

通过call()和apply()改变函数执行环境,this就会指向其它对象。

var name = 'window'

var obj = {
  name: 'obj name',
}

function getName(){
  console.log(this.name);
}


getName()             // window
getName.call(obj)     // obj name  修改 this 指向为obj
getName.call()        // window 当call方法的参数为空时,默认调用全局对象

通过bind()方法实现


var name = 'window'

function sayName(){
  console.log(this.name);
}

var obj = {
  name : 'obj name',
  sayName:sayName
}

obj.sayName()               // obj name
var sayName = obj.sayName
sayName()                   // window

var fn = obj.sayName.bind(obj)
fn()                        // obj name