`

关于js中 function中的length属性和call,apply方法

阅读更多
其实js中function自身的属性和方法还是比较多的,比如打开console它会给你一大堆的提示
         
    
这里重点只说说length属性和call和apply(important),举个例子先:
 function fn1(){
       console.log('fn1');
    }
   
    function fn2(a,b){
      console.log(a+b);
    }
   
    function fn3(a,b,c,d){
     fn2.call(this,a,b)+fn2.call(this,c,d);
    }
 
length属性的作用:显示方法参数的期望参数个数

 
call和apply在参考手册中是这样说的
call 方法
调用一个对象的一个方法,以另一个对象替换当前对象。

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

参数
thisObj
可选项。将被用作当前对象的对象。

arg1, arg2,  , argN
可选项。将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
 
1.apply方法作用跟call相同只是call方法第二个参数传进来的是参数序列,而apply传进来的是一个参数数组
 
引用别人的一段代码:
<input type="text" id="myText"   value="input text">
<script>
    function Obj(){this.value="对象!";}
    var value="global 变量";
    function Fun1(){alert(this.value);}

    window.Fun1();   //global 变量
    Fun1.call(window);  //global 变量
    Fun1.call(document.getElementById('myText'));  //input text
    Fun1.call(new Obj());   //对象!
</script>
 
我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域,这是它的第一个用途,改变this的指向。
2.大部分浏览器都内置了Function.prototype.bind,用来指定函数内部的this指向,即使没有原生的Function.prototype.bind实现,我们来模拟一个,
Function.prototype.bind = function(context){
  var self = this;
   return function(){
       return self.apply(context,arguments);
   }
};
 例子:
 
var obj = {
    name:'objName'
};
var func = function(){
    console.log(this.name); //输出objName
}.bind(obj);
 3.借用其他对象方法
  借用方法的第一种场景是"借用构造函数",通过这种技术,可以实现一些类似继承的效果:
var sup = function(name){
   this.name = name;
};

var sub = function(){
    sup.apply(this,arguments[0]);
};

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

var s = new sub('Dave');
console.log(s.getName());  //输出Dave
 
总结:
1、每个函数都包含两个非继承而来的方法:apply()和call()。 
2、他们的用途相同,都是在特定的作用域中调用函数,主要3种用途。 
3、接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。

  • 大小: 14.8 KB
  • 大小: 4.8 KB
1
2
分享到:
评论

相关推荐

    javascript语言参考+教程 CHM

    length 属性 (Function); length 属性 (String); LN10 属性; LN2 属性; LOG10E 属性; LOG2E 属性; MAX_VALUE 属性; message 属性; MIN_VALUE 属性; multiline 属性; name 属性; NaN 属性; NaN 属性 ...

    Javascript数组操作高级心得整理

    (1) JavaScript对象也是有属性和方法的 15  对象属性的使用 15  对象方法的使用 15 (2) 对象的定义与实例化 15 (3) 对象的作用域 16  JavaScript对象只有公用作用域 16  JavaScript对象没有静态作用域 16 ...

    javascript文档

    length 属性 (Array) 返回比数组中所定义的最高元素大 1 的整数值 。 length 属性 (Function) 返回为函数所定义的参数个数。 length 属性 (String) 返回 String 对象的长度。 小于运算符 (&lt;) 比较两个表达式,...

    微软JavaScript手册

    length 属性 (Array) 返回比数组中所定义的最高元素大 1 的整数值 。 length 属性 (Function) 返回为函数所定义的参数个数。 length 属性 (String) 返回 String 对象的长度。 小于运算符 (&lt;) 比较两个表达式,...

    hls.min.js

    return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/hls.js/dist/",e(e.s=7)}([function(t,e,r){"use strict";function i(){}function a(t,e){return e="["+t+"] &gt;...

    jquery需要的所有js文件

    setTimeout(function(){a(d).focus(),c&&c.call(d)},b)}):this._focus.apply(this,arguments)},scrollParent:function(){var b;a.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test...

    js.rar(react初学者简单测试用babel.js,react-development.js,react-dom.js)

    return function(e,t,i){n.apply(this,[e,t,i].concat(r))}}(e[t]);break;default:e[t]=e[e[t]]}return e}([function(e,t,r){"use strict";function n(e,t){return g(t)&&"string"==typeof t[0]?e.hasOwnProperty(t...

    JScript 语言参考

    length 属性 (Array) 返回比数组中所定义的最高元素大 1 的整数值 。 length 属性 (Function) 返回为函数所定义的参数个数。 length 属性 (String) 返回 String 对象的长度。 小于运算符 (&lt;) 比较两个表达式,...

    js设计模式源码

    // call 和 apply 方法都是用来调用“不属于自身的方法”,apply第二参数必须是数组 // 下面的代码相当于 arguments.slice,但是arguments本身没有 slice方法 // slice 方法是用来截取数组 // arguments...

    tweenjs.min.js文件

    e.push(b):d[a]=[b],b},a.on=function(a,b,c,d,e,f){return b.handleEvent&&(c=c||b,b=b.handleEvent),c=c||this,this.addEventListener(a,function(a){b.call(c,a,e),d&&a.remove()},f)},a.removeEventListener=...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    JavaScript权威指南

    Function Scope: The Call Object Section 7.4. Function Arguments: The Arguments Object Section 7.5. Function Properties and Methods Chapter 8. Objects Section 8.1. Objects and Properties ...

    simplewebrtc.js webrtc网页视频开发帮助工具

    var args = [].slice.call(arguments, 1), callbacks = this.callbacks[event], specialCallbacks = this.getWildcardCallbacks(event), i, len, item; if (callbacks) { for (i = 0, len = callbacks....

    jquery五角星评分效果代码

    methods.error.call(this, 'you must add the "click: function(score, evt) { }" callback.'); } methods.setTarget.call(this, score, true); }); }, error: function(message) { $(this).html(message); ...

    newMap地图

    return function(){return a.apply(b,c||arguments)}},tryFuncs:function(){var a=null;for(var b=0,c=arguments.length;b;b++){var d=arguments[b];try{a=d();break}catch(e){}}return a},getParameterString:...

    我的javascript 函数链之演变

    最易读版 代码如下: function chain(obj){ function fun(){ if (arguments.length == 0){ return fun.obj; } var methodName = arguments[0], methodArgs = [].slice.call(arguments,1); fun.obj[methodName].apply...

    Javascript 实用小技巧

    //自定义的apply,call Function.prototype.apply = function (obj, argu) { if (obj) obj.constructor.prototype._caller = this; var argus = new Array(); for (var i=0;i&lt;argu.length;i++) ...

    出现问题a is defined高手帮忙

    i&lt;DIVS_TO_CREATE.length; i++) { var id = DIVS_TO_CREATE[i]; var div = document.createElement("div"); DragZoomUtil.style([div], {position: 'absolute', display: 'none'}); zoomDiv.appendChild(div); ...

    Google C++ Style Guide(Google C++编程规范)高清PDF

    Other C++ Features Reference Arguments Function Overloading Default Arguments Variable-Length Arrays and alloca() Friends Exceptions Run-Time Type Information (RTTI) Casting Streams Preincrement and ...

    flash action script 经典字典教程大全,学flash必备

    call call()、Function.call() callee arguments.callee caller arguments.caller 摄像头 Camera 类 capabilities System.capabilities 对象 CAPSLOCK Key.CAPSLOCK caption ContextMenuItem.caption ...

Global site tag (gtag.js) - Google Analytics