背景介绍
1.this是JavaScript语言中定义的众多关键字之一。 this 是一个特殊的标识符关键字 —— 在每个 function 中自 动根据作用域(scope) 确定, 指向的是此次调用的 “所有者,owner”。它的特殊在于它自动定义于每一个函数域内。
2.知识剖析
概念的区分:
变量:全局中的变量可以称之为window这个对象的属性;
函数(function):全局中的函数可以称之为window这个对象的方法;
属性:其实就是你声明的对象中的变量;
方法:其实就是你声明的对象中的函数;
对象中的属性这个概念对应着变量,对象中的方法这个概念对应着函数。
huahua = 'wang';
function cuihua() {
alert('我叫翠花');
}//全局变量,与函数
shuangdan = {
dan:'两个',
myname:function () {alert('我叫李双蛋')}
};//对象的属性与方法;
作用域和上下文:
函数的每次调用都有与之紧密相关的作用域和上下文。
从根本上来说,作用域是基于函数的,而上下文是基于对象的。
换句话说,作用域涉及到所被调用函数中的变量访问,并且不同的调用场景是不一样的。
上下文始终是this关键字的值, 它是拥有(控制)当前所执行代码的对象的引用。
2. this指向的是谁?
在所有 function 中, this 的值都是根据
上下文(context, 函数在调用时刻所处
的环境)来决定的。this 的作用域(scope) 与函数
定义的位置没有关系, 而是取决于函数在哪里被调用
brand = 'Nissan';
myCar = {brand:'honda'};
getBrand = function () {
console.log(this.brand);
};
myCar.getBrand = getBrand;
myCar.getBrand();//honda
getBrand();//nissan
// 函数是哪个对象的方法, 在函数中, this 就绑定到这个对象。
解析:
现在myCar.getBrand();和getBrand()指向的都是同一个函数,
但是里面的this是不同的,因为它取决于 getBrand() 在哪个上下文中调用。
因此第一个函数调用对应的是 mycar对象, 第二个函数调用对应的是window.
现在就知道了, 函数是哪个对象的方法, 在函数中, this 就绑定到这个对象。
在函数中, this 取决于函数是怎么调用的。分三种情况:
3.1在简单函数调用(Simple Function Call)中使用this
第一种情形是直接调用一个独立的函数。
function simpleCall(){
console.log(this);}
simpleCall();// output: the Window object
在这种情况下,this值没有被 call 设置。
this 又必须是一个对象, 所以他的值默认为全局对象。
3.2. 在对象的方法(Object’s Method)中使用
this将函数保存为对象的属性, 这样就转化为一个方法, 可以通过对象调用这个方法。
当函数被当成对象的方法来调用时, 里面的 this 值就被设置为调用方法的对象。
var message = {
content: "I'm a JavaScript!",
showContent: function() {
console.log(this.content);
}
};
message.showContent();// output: I'm a JavaScript!
// 还是那句话函数是哪个对象的方法, 在函数中, this 就绑定到这个对象。
3.3. 我们可以通过 new 操作符来调用函数。在这种情况下,这个函数
就变成了构造函数(也就是一个对象工厂).
当一个函数作为构造器使用时(通过 new 关键字), 它的 this 值绑定到新
创建的那个对象。如果没使用 new 关键字, 那么他就只是一
个普通的函数, this 将指向 window 对象。
function Message(content){
this.cont = content;
this.showCont = function(){
console.log(this.cont);
};
}
var message = new Message("I'm JavaScript Ninja!");
message.showCont();
在上面的示例中, 有一个名为 Message() 的构造函数。通过
使用 new 操作符创建了一个全新的对象,名为 message。同时还通过传给
构造函数一个字符串, 作为新对象的content属性。
2.参考资料
掌握JS中的“this” (一) 作者:‘铁锚’JavaScript的作用域和上下文 作者:‘荆棘中的百合花’
this - 是个啥 作者:表严肃