JavaScript中的this一直以来都是一个比较不容易理解的知识点,this的指向问题很容易对新手造成干扰这里就总结一下JavaScript中的this的指向问题
this的指向大致分为以下四种:
- 作为对象的方法调用
- 作为普通函数调用
- 构造器调用
- Function.prototype.call或Function.prototype.apply调用
下面分别进行介绍:
1.作为对象的方法调用
当函数作为对象的方法被调用时,this指向该对象;
var obj = {
a: 1,
getA: function () {
alert(this === obj); //输出true
alert(this.a); // 输出1
}
}
obj.getA()
2.作为普通函数调用
当函数不作为对象的属性被调用时,也就是我们通常说得普通函数方式,此时的this总是指向全局对象.在浏览器的JavaScript里,这个全局对象就是window对象.
window.name = 'globalName'
var getName = function () {
return this.name
}
console.log(getName()); // 输出globalName
或者
window.name = 'globalName'
var getName = function () {
return this.name
}
console.log(getName()); // 输出globalName
var myObject = {
name: 'michael',
getName: function () {
return this.name
}
}
console.log(myObject.getName()) // 输出michael
var getName = myObject.getName
console.log(getName()) // 输出globalName
有时候我们会遇到一些困扰,比如在div节点的事件内部,有一个局部的callback方法,callback作为普通函数调用时,callback内部的this指向了window,但我们往往希望让它总是指向该节点,见如下代码:
<div id="div1">我是一个div</div>
<script>
window.id = 'window'
document.getElementById('div1').onclick = function () {
alert(this.id) //输出div1
var callback = function () {
alert(this.id); //输出window
}
callback();
}
</script>
此时有一种简单的解决方案,可以用一个变量临时保存div节点的引用:
window.id = 'window'
document.getElementById('div1').onclick = function () {
var that = this; // 保存div的引用
var callback = function () {
alert(that.id); //输出div1
}
callback();
}
在ECMA5的static模式下,这种情况的this已经被规定为不会指向全局对象,而是undefined:
function func() {
"use strict";
alert(this);//输出undefined
}
func();
在最新的es6中,引入了箭头函数的概念,箭头函数很大一部分对this的影响很深,这里不对es6的箭头函数详细分析,直接拿出结论,箭头函数没有自己的 this，其内部的 this 绑定到它的外围作用域。对象内部的箭头函数若有this，则指向对象的外围作用域。
window.color = "red";
//let 声明的全局变量不具有全局属性，即不能用window.访问
let color = "green";
let obj = {
color: "blue",
getColor: () => {
return this.color;//this指向window
}
};
let sayColor = () => {
return this.color;//this指向window
};
obj.getColor();//red
sayColor();//red
如果是对vue熟悉的,那么对这个问题就更容易理解了,在vue中,我们会很方便的使用箭头函数,比如ajax之后,改变vue的data的值：
html:
<div id="app" @click="getName">
我是div
</div>
<script>
let a = 10
var vm = new Vue({
el: '#app',
data: {
a: 11
},
methods: {
getName: function () {
console.log(this.a) // 输出11
$.get('https://cnodejs.org/api/v1/topics', function (data) {
console.log(this.a) // 输出undefined
var that=this;
console.log(that.a);//输出11
})
$.get('https://cnodejs.org/api/v1/topics', (data) => {
console.log(this.a) //输出11
})
}
}
})
</script>
以上两种用jQuery的ajax在vue中分别使用了普通函数和箭头函数,输出的结果都不一样,箭头函数指向了vue对象,所以输出data里面的a,输出11,普通函数则输出undefined．
查看原文:https://blog.noob6.com/2018/06/03/the_meaning-of-this-in-javascript/
