在上篇文章中,我们提到了使用new和不使用new调用构造函数的区别,如下例:
复制代码 代码如下:
function benjamin(username, sex) {
this.username = username;
this.sex = sex;
}
var benjamin = new benjamin(zuojj, male);
//outputs: benjamin{sex: male,username: zuojj}
console.log(benjamin);
var ben = benjamin(zhangsan, female);
//outputs: undefined
console.log(ben);
当构造函数当做普通函数被调用时,并没有返回值,同时this指向全局对象。那么我们如何来避免因为缺少new关键字,而产生的问题呢?
复制代码 代码如下:
function benjamin(username, sex) {
//check whether this is a benjamin object
if(this instanceof benjamin) {
this.username = username;
this.sex = sex;
}else {
return new benjamin(username, sex);
}
}
var benjamin = new benjamin(zuojj, male);
//outputs: benjamin{sex: male,username: zuojj}
console.log(benjamin);
var ben = benjamin(zhangsan, female);
//outputs: benjamin {username: zhangsan, sex: female}
console.log(ben);
在上例中,我们首先检查this是否是benjammin的实例,如果不是,使用new自动调用构造函数,并实例化,这意味着,我们不再需要担心,遗漏new关键字实例化构造函数。当然这样我们可能会养成一个坏的习惯,如果避免这种现象呢?我们可以抛出一个错误,像下面这样:
复制代码 代码如下:
function benjamin(username, sex) {
//check whether this is a benjamin object
if(this instanceof benjamin) {
this.username = username;
this.sex = sex;
}else {
// if not, throw error.
throw new error(`benjamin` invoked without `new`);
}
}
二、this指向调用该函数的对象
看下面的例子:
复制代码 代码如下:
var x = 10;
var obj = {
x: 10,
output: function() {
//outputs: true
console.log(this === obj);
return this.x;
},
innerobj: {
x: 30,
output: function() {
//outputs: true
console.log(this === obj.innerobj);
return this.x;
}
}
};
//outputs: 10
console.log(obj.output());
//outputs: 30
console.log(obj.innerobj.output());
三、this指向全局对象
在上面讨论构造函数的时候我们也讨论到不适用new的时候,this会指向全局对象,下面我们来看看两种常见的容易犯错的实例:
复制代码 代码如下:
var x = 100;
var obj = {
x: 10,
output: function() {
(function() {
//outputs: true
console.log(this === window);
//outputs: inner: 100
console.log(inner: + this.x);
})();
return this.x;
}
};
//outputs: 10
console.log(obj.output());
在使用闭包的时候,作用域发生变化,this指向window(浏览器中)。
复制代码 代码如下:
var x = 100;
var obj = {
x: 10,
output: function() {
return this.x;
}
};
var output = obj.output;
//outputs: 10
console.log(obj.output());
//outputs: 100
console.log(output());
var obj2 = {
x: 30,
output: obj.output
}
//outputs: 30
console.log(obj2.output());
此时this始终指向函数调用时的对象。
四、this指向apply/call()方法指派的对象
复制代码 代码如下:
var x = 100;
var obj = {
x: 10,
output: function() {
return this.x;
}
};
//outputs: 10
console.log(obj.output());
var obj2 = {
x: 40,
output: obj.output
}
//outputs: 40
console.log(obj.output.call(obj2));
//outputs: 10
console.log(obj2.output.apply(obj));
五、callback函数內的this指向调用该callback的函数的this所指向的对象
复制代码 代码如下:
//
$(#username).on(click, function() {
console.log(this.value);
});
六、function.prototype.bind中的this
the bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
实例一:
复制代码 代码如下:
function person() {
return this.name;
}
//function.prototype.bind
var per = person.bind({
name: zuojj
});
console.log(per);
var obj = {
name: ben,
person: person,
per: per
};
//outputs: ben, zuojj
console.log(obj.person(), obj.per());
实例二:
复制代码 代码如下:
this.x = 9;
var module = {
x: 81,
getx: function() { return this.x; }
};
//outputs: 81
console.log(module.getx());
var getx = module.getx;
//outputs: 9, because in this case, this refers to the global object
console.log(getx);
// create a new function with 'this' bound to module
var boundgetx = getx.bind(module);
//outputs: 81
console.log(boundgetx());
