this的指向问题:
1.作为对象的函数被调用(this指向该对象)
2.作为普通函数被调用(此时this指向全局对象,在浏览器的JavaScript中,全局对象是window)
3.构造函数调用
4.Function.prototype.call 和 Function.prototype.apply 调用 (与普通的函数调用相比,可以动态的改变传入函数的this)
1.作为对象函数被调用(this指向该对象
let obj = {
name:'jack',
getName:function(){
console.log(this===obj); // true
console.log(this.name); // 'jack'
}
}
obj.getName()
2.作为普通函数被调用
注释:函数不作为对象的属性被调用时,此时就是普通的函数方式,this是指向全局对象,在浏览器中JavaScript全局对象是window
window.name = 'rousi'
let getName = function(){
return this.name
}
console.log(getName()); // rousi
// 或者
window.name = 'amao'
let myObject = {
name :"seven",
getName:function(){
return this.name
}
}
let getName1 = myObject.getName // 此时myObject.geName 是作为普通函数被调用,所以此时的this指向的是window
console.log(getName1()); // amao
3.构造函数调用
注释:JavaScript 中没有类,但是可通过构造器创建对象,提供了new运算符,让构造器看起来像一个类,构造器外表和普通函数一毛一样,区别在于被调用,使用new运算符调用函数时,函数总会返回一个对象,构造器里的this就指向这个返回的对象,代码如下:
let MyClass = function(){
this.name = 'dingdamao'
}
let obj = new MyClass()
console.log(obj.name); // dingdamao
注意: 用new调用构造函数的时候,需注意一个问题,如果构造器返回了一个object类型的对象,最终的运算结果会返回这个对象,不是以上说的this,代码如下:
let MyClass = function(){
this.name = 'dingdamao' // 此时this指向还是指向Myclass这个函数
return {
name:'lilaoer' // 返回的是这个对象
}
}
let obj = new MyClass()
console.log(obj.name); // lilaoer
如果构造函数不显式的返回任何数据,或者返回的是一个非对象的数据,就不会造成上述问题
let MyClass = function(){
this.name = 'zhangsan'
return 'name' // 此处如果返回的是对象{} 下面obj.name 就是undefined
}
let obj = new MyClass()
console.log(obj.name); // zhangsan
4.Function.prototype.call()和Function.prototype.apply()调用
注释:与普通函数相比,call()和apply()可以动态的改变传入的this
let obj1 = {
name : 'dijia',
sayName:function(){
return this.name
}
}
let obj2 = {
name:'leiou'
}
console.log(obj1.sayName()); // dijia
console.log(obj1.sayName.call(obj2)); // leiou
本文摘自JavaScript设计模式与开发实践,如有侵权,请联系本人删除