(JS设计模式与开发实践笔记)第二章_var name = 'nike'; var obj = { name: 'sven', getna-CSDN博客

本文链接：https://blog.csdn.net/zhuangww05/article/details/108234073

第二章：this、call和apply

this
JS的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。
this指向的四种情况

作为对象的方法调用

var obj={
	a:1,
	getA:function(){
		alert(this===obj); //true
		alert(this.a)      //1
	}
};

obj.getA();

作为普通函数调用

// 1.
window.name='globalName';

var getName=function(){
	return this.name;
}

console.log(getName());   //globalName


// 2.
window.name='globalName';

var myObject={
	name:'sven',
	getName:funtion(){
		return this.name;
	}
};

var getName=myObject.getName;
console.log(getName());    //globalName


// 3.
<html>
	<body>
		<div id="div1">我是一个div</div>
	</body>
	<script>
		
		window.id='window';

		document.getElementById('div1').onclick=function(){
			alert(this.id);
			var callback=function(){
				alert(this.id);     //window  
			}
			callback();
		};
		
	</script>
</html>



// 3的解决方案
document.getElementById('div1').onclick=function(){
	var that=this;  //保存div的引用
	var callback=function(){
		alert(that.id);    //div1
	}
	callback();
};

构造器调用

var MyClass=function(){
	this.name='sven';
};

var obj=new MyClass();
alert(obj.name);     //sven


// 显式返回object类型的对象
var MyClass=function(){
	this.name='sven';
	return {   //显式地返回一个对象
		name:'anne';
	};

	var obj=new MyClass();
	alert(obj.name);    //anne
}

Function.prototype.call或Function.prototype.apply调用

var obj1={
	name:'sven',
	getName:function(){
		return this.name;
	};
};

var obj2={
	name:'anne'
};

console.log(obj1.getName());   //sven
console.log(obj1.getName.call(obj2));    //anne

call和apply

当使用call或apply的时候，如果我们传入的第一个参数为null，函数体内的this会指向默认的宿主对向，在浏览器中则是window

// Function.prototype.call
var func=function(a,b,c){
	alert([a,b,c]);     //[1,2,3]
};

func.apply(null,[1,2,3]);

//Function.prototype.apply
var func=function(a,b,c){
	alert([a,b,c]);     //[1,2,3]
};

func.call(null,1,2,3)

有时候我们使用call或apply的目的不在于指定this指向，而是另有用途，比如借用其他对象的方法

call和apply的用途

改变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);

借用其他对象的方法

// 第一种
var A=function(name){
	this.name=name;
};

var B=function(){
	A.apply(this,arguments);
};

B.prototype.getName=function(){
	return this.name;
};

var b=new B('sven');
console.log(b.getName());

//第二种
(function(){
	Array.prototype.push.call(arguments,3);
	console.log(arguments);
})(1,2);

//ArrayPush这个对象至少要满足
//①对象本身要可以存取属性
//②对象的length属性可读写

Function.prototype.bind

Function.prototype.bind=function(context){
	var self=this;
	return function(){
		return self.apply(context,arguments);
	}
};

var obj={
	name:'sven'
};

var func=function(){
	alert(this.name);    //sven
}.bind(obj);

func();