javaScript的this详解
一、this 原理
this指的是函数运行时所在的环境。为什么?
因为:内存的数据结构中,函数是一个单独的值,所以它可以在不同的环境(上下文)执行。所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。
举例:obj.foo()是通过obj找到foo,所以就是在obj环境执行。一旦var foo = obj.foo,变量foo就直接指向函数function(){}本身,所以foo()就变成在全局环境执行。
当属性的值是函数时,引擎会将函数单独保存在内存中,然后再将函数的地址赋值给foo属性的value属性。
举例:
// 函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
obj = {
name: 'a',
getName: function () {
// 函数没有执行的时候this不能判定指向哪,要根据上下文
console.log(this.name);
}
};
// 给obj.getName另取个名叫fn,fn是个指针指向obj.getName的函数
var fn = obj.getName;
// obj.getName()调用后this指向obj,输出'a'
obj.getName(); // a
// 将obj的getName赋值给fn,执行时this为window,window中没有name变量所以为undefined
fn(); // undefined
// 直接 执行!getName(),this也指向obj,打印了'a'
// 因为obj.getName()没有返回值(return),所以fn2是undefined
var fn2 = obj.getName(); // a,是obj.getName()执行console.log打印的,不是fn2的值哦
console.log(fn2); // undefined
console.log(fn === obj.getName); // true,前面有var fn = obj.getName
console.log(fn === fn2); // false,fn是一个函数,fn2是undefined
二、this 用法
参考:this的用法
/*
参考:阮一峰http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
待续补充:红宝书$7.2.2,P182
*/
// # this的用法
// this是在函数体内部 自动生成 的一个对象,只能在 函数体内部 使用
// this就是函数运行时所在的 环境对象。
//一、纯粹的函数调用
var x = 1;
function test() {
console.log(this.x);
}
test(); // 1
// 二、作为对象方法的调用
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m(); // 1
// 三、作为构造函数调用
var x = 2;
function test() {
this.x = 1;
}
// this指向新对象
var obj = new test();
console.log(x); // 2,全局变量x值没变
console.log(obj.x); // 1 ,this指向 obj
// 四、apply调用
// apply 作用是改变函数的调用对象,它的第一个参数 this 就表示 改变后的调用这个函数的对象
var x = 0;
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
// apply()的参数为空时,默认调用全局对象.
obj.m.apply(); // 0
// 传参后,this代表的是对象obj
obj.m.apply(obj); // 1