JS-this

Posted 2022-05-24 yangjiale

 

JS-this

• call,apply,bind作用
• 使用例子
• call的使用
• apply和call的区别
• bind和call的区别
• this绑定
• 默认绑定
• 全局环境
• 函数调用
• 被嵌套函数独立调用
• 隐式绑定
• 隐式丢失
• 函数别名
• 函数作为参数传递
• 内置函数
• 显示绑定
• 例子：数组的forEach()显示绑定
• new绑定

 

call,apply,bind作用

call,apply,bind都是用来改变this的指向

使用例子

call的使用

function Person()
	alert(this.name);

var student=
	name:"zhangShan"
;
Person.call(student);	//this指向student,输出zhangShan

apply和call的区别

var person=
	name:"zhangShan",
	say:function(age,phone)
		alert(this.name+" "+age+" "+phone);
	
;
var person2=
	name:"xiaoMing"
;
person.say.call(person2,20,"12356985");	//值必须分开传递
person.say.apply(person2,[20,"12356985"]);	//必须是一个数组
var person2Args=[20,"12356985"];	//也可以单独声明然后用apply

bind和call的区别

function Person()
	alert(this.name);

var student=
	name:"zhangShan"
;
Person.call(student);	//直接运行输出结果
Person.bind(student);	//不会运行,返回的是一个函数
Person.bind(student)(); //调用函数则运行
var StudentMethod=Person.bind(student);	//作为函数保存起来

this绑定

默认绑定

全局环境

console.log(this);	//输出window

函数调用

function pd()
	console.log(this==window);

pd();	//输出true，函数里的额this被默认绑定window

被嵌套函数独立调用

var a=0;
function test()
	var a=1;
	function t1()
		console.log(this.a);	//输出0，this指向window
	
	t1();

test();

上面4-7行等价于：

//IIFE形式
(function t1()
	console.log(this.a);
)();

隐式绑定

var a=0;
var test=
	a:1,
	fun:function()
		console.log(this.a);
	
;
test.fun(); //this隐式绑定到test，输出1

隐式丢失

隐式丢失总结起来只有一种情况：一个对象的方法被独立调用时会造成隐式丢失

函数别名

var a=0;
var test=
	a:1,
	fun:function()
		console.log(this.a);
	
;
var f=test.fun;	//f仅仅等于独立的fun方法，所以this丢失绑定对象，转为默认绑定(绑到window)
f();	//输出0

函数作为参数传递

var a=0;
var test=
	a:1,
	fun:function()
	console.log(this.a);
	
;
function run(fun)
	fun();

run(test.fun);	/输出0

内置函数

//将上面代码的8-11行改为内置的setTimeout函数同样会引起隐式
setTimeout(test.fun,0);	//输出0

显示绑定

使用call,apply,bind绑定的即为显示绑定

另外还有一些自带对象的某些方法也有显示绑定功能：
例如数组的 map()、forEach()、filter()、some()、every() 方法

例子：数组的forEach()显示绑定

var a=0;
function say()
	console.log(this.a);

var obj=
	a:1
;
[1,2,3].forEach(say,obj);	//参数一：遍历对象，参数二：显示绑定的对象

new绑定

ction person(name,age,phone)
	this.name=name; //this指向新创建的对象
	this.age=age;
	this.phone=phone;

var p1=new person("sam",20,"1256315");

构造函数中，this指向新创建的对象