浅谈javascript 函数属性和方法

 更新时间:2015年01月21日 09:35:00   投稿:hebedich  
这篇文章主要介绍了浅谈javascript 函数属性和方法的相关资料,需要的朋友可以参考下

        每个函数都包含两个属性:length 和 prototype
        length:当前函数希望接受的命名参数的个数
        prototype:是保存他们所有实力方法的真正所在

复制代码 代码如下:

        function sayName(name) {
            alert(name);
        }
        function sum(num1, num2) {
            return num1 + num2;
        }
        function sayHi() {
            alert("hi");
        }
        alert(sayName.length);//1 参数个数一个
        alert(sum.length);//2 参数个数2个
        alert(sayHi.length);//0 没有参数

        每个函数都包含两个非继承而来的方法:apply() 和 call()
        这两个方法都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值
        首先apply()接受两个参数:一个是函数运行的作用域,另一个参数数组(可以是数组实例也可以是arguments对象)

复制代码 代码如下:
 
 function sum(num1, num2) {
            return num1 + num2;
        }
        function callSum1(num1, num2) {
            return sum.apply(this, arguments);//传入arguments对象
        }
        function callSum2(num1, num2) {
            return sum.apply(this, [num1, num2]);
        }
        alert(callSum1(10, 10));//20
        alert(callSum2(10, 20));//30

        其次,call方法第一个参数没有变化,变化的是其余的参数都是传递参数,传递给函数的参数需要逐个列举出来

复制代码 代码如下:
 
 function sum(num1, num2) {
            return num1 + num2;
        }
        function callSum(num1, num2) {
            return sum.call(this, num1, num2);
        }
        alert(callSum(10, 200));

        至于使用哪个方法更方便,完全取决于你的意愿。如果没有参数,用哪个都一样。
        但是,apply和call方法的出现绝对不是只是为了怎样去船体参数。
        它们真正的用武之地在于扩充函数赖以运行的作用域。

复制代码 代码如下:

        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

        使用apply和call来扩充作用域的最大的好处就是不需要与方法有任何的耦合关系。

        ECMAScript5 还定义了一个方法:bind()。这个方法会创建一个函数的实例,其this值会被绑定到传给bind函数的值

复制代码 代码如下:
 
 window.color = "red";
        var o = {color: "blue"};
        function sayColor() {
            alert(this.color);
        }
        var bindFun = sayColor.bind(o);
        bindFun();//blue

以上就是本文的全部内容,希望小伙伴们能够喜欢。

相关文章

  • 详解TypeScript中类的定义与用法

    详解TypeScript中类的定义与用法

    TypeScript是一种开源的编程语言,它是JavaScript的超集,这篇文章主要来和大家介绍一下TypeScript中类的定义与用法,感兴趣的小伙伴可以了解一下
    2023-06-06
  • JavaScript去除数组里重复值的方法

    JavaScript去除数组里重复值的方法

    这篇文章主要介绍了JavaScript去除数组里重复值的方法,涉及javascript针对数组操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • javascript回车完美实现tab切换功能

    javascript回车完美实现tab切换功能

    这篇文章主要介绍了javascript通过回车实现tab切换功能,需要的朋友可以参考下
    2014-03-03
  • js实现弹窗居中的简单实例

    js实现弹窗居中的简单实例

    下面小编就为大家带来一篇js实现弹窗居中的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • javascript表格的渲染组件

    javascript表格的渲染组件

    这篇文章主要介绍了javascript表格的渲染组件的相关资料,需要的朋友可以参考下
    2015-07-07
  • JavaScript时间与时间戳的转换操作实例分析

    JavaScript时间与时间戳的转换操作实例分析

    这篇文章主要介绍了JavaScript时间与时间戳的转换操作,结合实例形式分析了javascript日期与时间戳转换相关函数与操作技巧,需要的朋友可以参考下
    2018-12-12
  • JavaScript常用工具函数大全

    JavaScript常用工具函数大全

    这篇文章主要介绍了JavaScript常用工具函数,汇总整理了各种JavaScript常用工具函数,包括获取、判断、转换、设置等相关功能函数的定义与使用方法,需要的朋友可以参考下
    2020-05-05
  • html页面显示年月日时分秒和星期几的两种方式

    html页面显示年月日时分秒和星期几的两种方式

    在html页面中显示时间是很常见的,实现的方法有很多,下面为大家简单介绍两种方式,有需求的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • flexslider.js实现移动端轮播

    flexslider.js实现移动端轮播

    本文主要分享了flexslider.js实现移动端轮播的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 浅谈js中的延迟执行和定时执行

    浅谈js中的延迟执行和定时执行

    下面小编就为大家带来一篇浅谈js中的延迟执行和定时执行。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论