首页 > 移动平台 > 详细

夺命雷公狗---javascript NO:32 Call/Apply方法

时间:2015-12-09 11:21:51      阅读:190      评论:0      收藏:0      [点我收藏+]

行内绑定中this指向:全局window对象

动态绑定中this指向:当前要操作的dom对象

构造器中的this指向:谁实例化构造器那么其内部的this就指向谁

1、为什么需要Call与Apply方法

问题:我们可以不可以手工改变函数内部的this指向?答:可以,使用Call或Apply方法

 

2、如何定义Call与Apply方法

call([thisObj[,arg1[,arg2[,argN]]]])

参数说明:

函数.call(thisObj,arg1,arg2,arg3…)

thisObj :要指向的Obj对象

arg1,arg2,arg3 :要传递的参数

 

apply([thisObj[,argArray]])

参数说明:

thisObj :要指向的Obj对象

argArray :要传递的参数,要求格式为数组

 

Call与Apply方法区别?

在功能上,两者效果完全一致,都是用于改变函数内部的this指向

在语法上,两者语法略有不同

 

3、为对象添加一个speak成员方法

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//定义一个公用的说话方法
function speak(){
alert(this.name+this.age);
}
function person(){}
//通过person构造器创建对象
var p1 = new person();
p1.name = ‘zhangsan;
p1.age = ’22′;
//通过call方法调用speak方法
speak.call(p1);
var p2 = new person();
p2.name = ‘lisi;
p2.age =55′;
//通过apply方法调用speak说话方法
speak.apply(p2);
</script>
</body>
</html>

 

 

4、call与apply方法执行流程

1)改变函数内部的this指向

2)调用函数

 

5、实现为speak方法传参

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//定义一个公用的说话方法
function speak(email,address){
alert(this.name+this.age+email+address);
}
function person(){}
//通过person构造器创建对象
var p1 = new person();
p1.name = ‘zhangsan;
p1.age = ’22′;
//通过call方法调用speak方法
speak.call(p1,’123.@.163.com’,’广东省广州市’);
var p2 = new person();
p2.name = ‘lisi;
p2.age =55′;
//通过apply方法调用speak说话方法
speak.apply(p2,[‘5566@qq.com’,’广东省深圳市’]);
</script>
</body>
</html>

 

 

 

6、案例:同时改变文字大小与颜色特效

 

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script>
function fn1(){
this.style.color = ‘red;
}
function fn2(){
this.style.fontSize = ’30px;
}
window.onload = function(){
document.getElementById(‘result’).onclick = function(){
fn1.call(this);
fn2.apply(this);
}
}
</script>
</head>
<body>
<div id=’result’>call与apply方法主要功能是改变函数内部的this指向</div>
</body>
</html>

 

夺命雷公狗---javascript NO:32 Call/Apply方法

原文:http://www.cnblogs.com/leigood/p/5032044.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!