第2章this、call和apply
2.1 this
2.1.1 this的去向
1作为对象方法调用
var obj = {
a:1,
getA:function(){
console.log(this === obj); //true
console.log(this.a); //1
}
}
obj.getA();
2作为普通函数调用
//浏览器
window.name = 'globalName'
var getName = function(){
return this.name;
}
console.log(getName()); //globalName
//或者
window.name = 'globalName'
var myObject = {
name:'sven',
getName:function(){
return this.name;
}
}
var getName = myObject.getName;
console.log(getName()); //globalName
<!DOCTYPE html>
<html lang="en">
<body>
<div id="div1">我是一个div</div>
<script>
window.id = 'window';
document.getElementById('div1').onclick = function(){
alert(this.id); //div1
var callback = function(){
alert(this.id); //window
}
callback();//被作为普通函数调用
}
</script>
</body>
</html>
保存div结点的引用
document.getElementById('div1').onclick = function(){
var that = this;
var callback = function(){
alert(this.id); //div1
}
callback();
}
es5的strict模式下，这种情况下的this已经被规定为不会指向全局对象，而是undefined
function func() {
'use strict'
alert(this); //undefined
}
func
3构造器调用
var Mycalss = function(){
this.name = 'sven'
return 'anne';
}
var obj = new Mycalss();
alert(obj.name); //sven
显式地返回一个object类型
var Mycalss = function(){
this.name = 'sven';
return {
name:'anne'
}
}
var obj = new Mycalss();
alert(obj.name); //anne
4Function.prototype.call或者Function.prototype.apply调用可以动态传入函数this
var ob1 = {
name:'sven',
getName:function(){
return this.name;
}
}
var obj2 = {
name:'anne'
}
console.log(obj1.getName());//sven
console.log(obj1.getName(obj2));//anne
2.1.2丢失的this
var myObject = {
name:'sven',
getName:function(){
return this.name;
}
}
console.log(myObject.getName());//sven
var getName2 = myObject.getName;
console.log(getName2());//undefined
<html>
<body>
<div id="div1">我是一个div</div>
</body>
<script>
var getId = document.getElementById;
getId('div1'); //异常
</script>
</html>
document.getElementById = (function(func){
return function(){
return func.apply(document,arguments);
}
})(document.getElementById);
var getId = document.getElementById;
var div = getId('div1');
alert(div.id); //div1
2.2call和apply
2.2.1call和apply的区别
apply接受两个参数，第一个参数指定了函数体内的this对象的指向，第二个参数为一个带下标的集合，这个集合可以为数组，也可以为类数组，apply方法把集合中的元素作为参数传递给被调用的函数：
var func = function(a,b,c){
alert([a,b,c]); //[1,2,3]
}
func.apply(null,[1,2,3]);
call传入的参数不固定，跟apply相同的是，第一个参数也是代表函数体内的this指向，从第二个参数开始往后，每个参数被依次传人函数
var func = function(a,b,c){
alert([a,b,c]); //[1,2,3]
}
func.call(null,1,2,3);
call是包装在apply上面的语法糖，明确知道函数接受多少参数，而且想一目了然的表达形参与实参的对应关系，那么也可以用call来传递参数。
当使用call和apply的时候，如果我们传人的第一个参数为null，函数体内的this会指向默认的宿主对象，在浏览器中则是window：
var func = function(a,b,c){
alert(this == window); //true
}
func.call(null,1,2,3);
严格模式还是null
var func = function(a,b,c){
alert(this === null); //true
}
func.call(null,1,2,3);
传人null来代替某个具体的对象
Math.max.apply(null,[1,2,3,5,4]) //5
2.2.2call和apply的用途
1改变this指向
var obj1 = {
name:'sven'
}
var obj2 = {
name:'anne'
}
window.name = 'window'
var getName = function(){
alert(this.name);
}
getName();
getName.call(obj1);
getName.call(obj2);
document.getElementById('div1').onclick = function(){
var func = function(){
alert(this.id) //div1
}
func.call(this);
}
2Function.prototype.bind
Function.prototype.bind = function(content){
var self = this;
return function(){
return self.apply(context,arguments);
}
};
var obj = {
name:'sven'
}
var func = function(){
alert(this.name); //sven
}.bind(obj);
func();
复杂
Function.prototype.bind = function(){
var self = this,
context = [].shift.call(arguments),
args = [].slice.call(arguments);
return function(){
return self.apply(context,[].concat.call(args,[].slice.call(arguments)));
}
};
var obj = {
name:'sven'
}
var func = function(a,b,c,d){
console.log(this.name); //sven
console.log([a,b,c,d]); //[1,2,3,4]
}.bind(obj,1,2);
func(3,4);
3借用其他对象的方法
var A = function(name){
this.name = name;
}
var B = function(){
A.apply(this,arguments);
}
B.proto.getName = function(){
return this.name;
}
var b = new B('sven');
console.log(b.getName()) //sven
往arguments中添加一个新的元素，通常会借用Array.prototype.push:
(function(){
Array.prototype.push.call(arguments,3);
console.log(arguments); //[1,2,3]
})(1,2)
arguments转成真正的数组Array.prototype.slice;
截去头一个元素Array.prototype.shift;
V8引擎源码Array.prototype.push
function ArrayPush(){
var n = TO_UINT32(this.length); //被push的对象的length
var m = %_ArgumentsLength(); //push的参数个数
for(var i = 0; i < m; i++){
this[i+n] = %_Arguments(i); //复制元素
}
this.length = n + m;
return this.length;
}
对象是数组还是类数组一点都不重要，可以把“任意”对象传人
var a = {}
Array.prototype.push.call(a,'first');
alert(a.length);//1
alert(a[0]); //first
在低版本IE浏览器中执行，必须显式地给对象a设置length属性
var a = {
length:0
};
对象本身要可以存取属性
对象的length属性可读写
var a = 1;
Array.prototype.push.call(a.'first');
alert(a.length);//undefined
alert(a[0]);//undefined
var func = function(){};
Array.prototype.push.call(func,'first');
alert(func.length)//报错