浅谈javascript 函数属性和方法_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

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

时间: 2024-12-23 15:40:54

浅谈javascript 函数属性和方法_javascript技巧的相关文章

浅谈Javascript实现继承的方法_javascript技巧

S1:js中一切皆对象,想想如果要实现对父对象属性和方法的继承,最初我们会怎样子来实现呢,考虑到原型的概念,最初我是这样来实现继承的 function Parent(){    this.name='123'; } Parent.prototype.getName=function(){    return this.name; } function Son(){    this.age=20; } Son.prototype=new Parent(); Son.prototype.getAge

浅谈javascript中的DOM方法_javascript技巧

1:获取对象的三种方法 1)document.getElementById(id);通过对象的属性id来获取; 2)element.getElementByTagName(tag);通过标签名来获取; 3)element.getElementByClassName(class);通过属性类名来获取; 2:属性的set和get方法. 1)object.getAttribute(attribute);获取元素的属性.===>>>HTMLDOM: object.attribute; 2)obj

浅谈JavaScript对象的创建方式_javascript技巧

通过Object构造函数或对象字面量创建对象时,使用同一个接口创建很多对象时,会产生大量的重复代码.为了简化,引入了工厂模式. 工厂模式 function createPerson(name, age, job) { var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayHello(){ alert(this.name); }; return obj; } var p1 = createPers

浅谈JavaScript的全局变量与局部变量_javascript技巧

一.JavaScript scope 的划分标准是function函数块,不是以 if.while.for来划分的 <script> function f1(){ alert("before for scope:"+i); //i未赋值(并不是没有声明!使用未声明变量或函数会导致致命错误从而中断脚本执行) //此时i值为undefined for(var i=0; i<3;i++){ alert("in for scope:"+i);} //i的值

浅谈JavaScript中的分支结构_javascript技巧

说到JavaScript中的分支结构,我们就不得不提到流程控制这个词,我们所有的程序都是由数据和算法组成的. 程序=数据+算法 通常我们所说的算法都可以通过"顺序","分支","循环"三种结构来组合完成. 在ECMA中规定了一些语句(也称为流程控制语句,分支结构语句),从本质上来说,这些语句定义了ECMAScript中的主要语法,语句通常使用一个或者多个关键字来完成给定任务. 1.1 if 语句 if 语句 - 只有当指定条件为 true 时,使

浅谈javascript的分号的使用_javascript技巧

JS中function 的开头有必要加分号吗?js语句后应该加分号吗? javascript大括号后面应使用分号吗?JS中function 的开头有加感叹号.分号是什么意思呢? Js多个文件集成成一个文件后,压缩代码时避免发生语法错误,可以如下处理 一.js 前加分号 例如:;(function($){...此处代码...})(); Javascript中分号表示语句结束,在开头加上,是为了压缩的时候和别的方法分割一下,表示一个新的语句开始 二.js函数后加分号 例如 // 模块1 // 前面有

浅谈JavaScript的自动垃圾收集机制_javascript技巧

执行环境会负责管理代码执行过程中使用的内存,编写JavaScript程序时,所需内存的分配以及无用内存的回收完全实现自动管理. 原理: 找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间)周期性地执行这一操作. 垃圾收集的方式: 1.标记清除(mark-and-sweep) 最常用的垃圾收集方式.当变量进入环境时,就将变量标记为"进入环境".从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,

浅谈JavaScript Math和Number对象_javascript技巧

1. Math 对象 1.1 介绍 Math 对象,是数学对象,提供对数据的数学计算,如:获取绝对值.向上取整等.无构造函数,无法被初始化,只提供静态属性和方法. 1.2 构造函数 无 :Math 对象无构造函数,无法被初始化,只提供静态属性和方法. 1.3 静态属性 1.3.1 Math.E :常量e.返回自然对数的底数:2.718281828459045   1.3.2 Math.PI :常量π.返回圆周率的值 :3.141592653589793  1.4 静态方法 1.4.1 Math.

浅谈window对象的scrollBy()方法_javascript技巧

scrollBy()方法的定义和用法: 此方法可以把内容移动指定尺寸.单位是像素(px). 点击可参阅更多window对象的属性和方法. 语法结构: scrollBy(x,y) 参数列表: 参数 列表 x 必需.内容向右移动的尺寸. y 必需.内容向下移动的尺寸. 浏览器支持: 1.IE浏览器支持此属性. 2.Firefox浏览器支持此属性. 3.Opera浏览器支持此属性. 4.chrome浏览器支持此属性. 代码实例: <!DOCTYPE html> <html> <he