前言
JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 一般有四种不同的情况下 ,this 指向的各不相同。但是有一个总的原则,那就是this指的是,调用函数的那个对象。
this一、函数调用
函数调用时,this
指向全局对象,如果是在浏览器中中,这个对象是window
。
请看下面这段代码:
var fn = function() {
function test() {
console.log(this);
// this 将会被设置为全局对象(译者注:浏览器环境中也就是 window 对象)
}
test();
}
fn() //执行函数fn,结果指向window
二、方法调用
当函数作为对象的方法
时,this指向该对象
请看下面这段代码:
var age = 10;
var xiaoming = {};
xiaoming.age = 18;
xiaoming.getAge = function(){
console.log(this.age);
}
xiaoming.getAge(); //18
之所以为18不是10,因为this指向xiaoming这个对象,所以打印出来是18
三、调用构造函数
如果函数倾向于和 new
关键词一块使用,则我们称这个函数是 构造函数。 在函数内部,this
指向新创建的对象。
请看下面这段代码:
var x = 0;
function test(){
this.x = 1;
}
var obj = new test();
console.log(obj.x); // 1
打印出来为1不为0,表明this指向新对象obj,而不是全局对象。
四、显式的设置 this (apply和call)
当使用 Function.prototype 上的 call
或者 apply
方法时,函数内的 this
将会被 显式设置为函数调用的第一个参数.
当第一参数为null
或者 undefined
,在浏览器环境里那么window对象就是默认的this指向。
var age = 0;
var xiaoming = {};
function setAge(age){this.age = age;}
xiaoming.age = 18;
xiaoming.setAge = setAge;
xiaoming.setAge.apply(null,[20]);
xiaoming.age // 18
age // 20
xiaoming.setAge.call(xiaoming,25);
xiaoming.age // 25
age // 20
apply和call区别在于传递参数格式不同,call()接受一个参数列表,而apply()接受包含多个参数的数组(或类数组对象)
文笔有限,才疏学浅,文中若有不对之处,还望告知。
参考文章
网友评论