this 关键字
this
指针所代表的是当前对象。但是,必须清楚的明确 当前对象
是哪个对象
<script type="text/javascript">
/**
* 页面加载时候由 JavaScript 引擎实例化了 window 对象
* 页面上的各种元素全部处于该 window 对象之中
* 此时 this 指针全部指向的是 window
*
*/
console.log(this); // window
console.log(this.name); // undefined
console.log(name); // undefined
var name = "Lucy"; // 该变量是全局变量
console.log(this.name); // "Lucy"
console.log(this == window); // true
console.log(this === window); // true
</script>
<script type="text/javascript">
/**
* this 指针指向的是实例化对象。
* show() 方法是一个函数,它并不是一个对象,更提不上实例化。
* 所以 this 指向的对象没有被改变,依然是 window。
* this.name 自然也就是代码第一行中定义的 "Jack"。
*
*/
var name = "Jack"; // 全局变量
function show(name) {
console.log(name); // "Locy"
console.log(this); // window
console.log(this.name); // "Jack"
}
show("Locy");
</script>
<script type="text/javascript">
/**
* 此处 this 指向的已经不是 window 了,指向的都是 object 这个对象。
* 因为 object 已经被实例化了,它是通过 new 关键字被实例化的。
* 而它的 show 属性是一个方法,
* 该方法中的 this 关键字自然指向的是已经被实例化的 object
* object 被实例化的时候,this 已经由指向 window 变成了指向 object。
*
*/
var name = "Jack"; // 全局变量
var object = new Object(); // 实例化一个对象
object.name = "Locy"; // 声明对象 name 属性,并赋值为 "Locy"
object.show = function () { // 声明对象 show 属性,并赋值为一个方法
console.log(name); // "Jack"
console.log(this); // Object {name: "Locy", show: function}
console.log(this.name); // "Locy"
};
object.show(); // 调用方法
</script>
<script type="text/javascript">
/**
* 这种字面量方式定义对象和上面通过 new 关键字定义对象,本质上是一样的
* 所以打印的结果也是一样的。
*
*/
var name = "Jack"; // 全局变量
var object = {
name: "Locy",
show: function () {
console.log(name); // "Jack"
console.log(this); // Object {name: "Locy", show: function}
console.log(this.name); // "Locy"
}
};
object.show();
</script>
<script type="text/javascript">
/**
* 更清晰的表现方式
* 定义一个方法,分别打印 this、name、this.name
*
*/
function show(name){
console.log(this);
console.log(name);
console.log(this.name);
}
/**
* 使用了 new 操作符,this 便指向了实例化的对象
* 打印结果:show{} "Locy" undefined
*
*/
var locy = new show("Locy");
/**
* 没用实例化对象,只是引用了该方法而已,this 依然指向 window 对象
* 打印结果:window{} "Jack" undefined
*
*/
var jack = show("Jack");
</script>