函数的属性和方法 apply 和call的区别及bind的使用

2017-8-27 14:35:58 2,252 views

函数的属性和方法

每个函数都有2个属性length,prototype
对于js中的引用类型而言,prototype是保存它们所有实例方法的真正所在,诸如toString()和valueOf()等方法实际上都保存在prototype名下,只不过是通过各自对象的实例访问。prototype是不可枚举的,因此使用for-in无法发现
每个函数都有2个非继承而来的方法,

apply()和call()

这2个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内的this值,
首先apply()方法接收2个参数,一个是在其中运行函数的作用域,另一个是参数数组。第二个参数可以是Array的实例,也可以是arguments对象
---修改于2018.3.11

第一种用法,给函数传递参数并保存执行环境。

function sum(num1,num2){
return num1+num2;
}
function callSum(num3,num4){
return sum.apply(this,arguments);//传入arguments对象
}
function callSum2(num3,num4){
return sum.apply(this,[num3,num4]);//传入数组
}
alert(callSum(10,10));
alert(callSum2(10,10));
//callSum在执行sum()函数时传入了this作为this值
因为是在全局作用域中调用的,所以传入的就是window对象

 

call()和apply()方法的作用相同,它们的区别在与接收参数的方法不同 使用call()时,传递给函数的参数必须逐个列举出来
如果函数接收到的参数为数组,则用apply()方便
function sum(num1,num2){
return num1+num2;
}
function callSum(num3,num4){
return sum.call(this,num3,num4);//传入arguments对象
}
alert(callSum(10,10));

 

第二中用法,扩充函数作用域
window.color="red";
var o={color:"blue"};
function sayColor(){
alert(this.color);
}
sayColor();//red 在全局作用域中调用
sayColor.call(this);//red 在全局作用域中调用函数
sayColor.call(window);//red 在全局作用域中调用函数
sayColor.call(o);//blue 函数的执行环境变了,函数体内的this对象指向了o
使用call和apply来扩充作用域的最大好处就是,对象不需要与方法有任何耦合关系

 

 apply和call的一些扩展用法

1.取出数组的最大最小值

var a = [1, 3, 2, 6];
   console.log(Math.max.apply(null, a));//6 ,这里并不需要考虑执行环境,所以为null即可

 2.函数绑定    常用于在保留执行环境的同时传递参数。

     function bind(fn, context) {
        return function() {
          return fn.apply(context, arguments);
//保留了执行环境并传递了参数。
        }
      }

 

es5原生bind()方法,

这个方法会创建一个函数的实例,其this值会被绑定到传给bind()函数的值
相当于 该方法会有一个函数实例返回值,实例的this值等于bind()接收到的参数
window.color="red";
var o={color:"blue"};
function sayColor(){
alert(this.color);
}
var obj=sayColor.bind(o);
obj();//blue
sayColor()调用bind()并传入对象o,创建了obj函数,obj函数里的this值等于o,即使在 全局环境中调用该方法也会看见blue//

 

1>ie9+才支持
0

No Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。