一，js中对象继承

js中有三种继承方式

1.js原型（prototype）实现继承

 <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>

 <body>

 <script type="text/javascript">

     function Person(name,age){

         this.name=name;

         this.age=age;

     }

     Person.prototype.sayHello=function(){

         alert("使用原型得到Name："+this.name);

     }

     var per=new Person("马小倩",21);

     per.sayHello(); //输出：使用原型得到Name:马小倩  

     function Student(){}

     Student.prototype=new Person("洪如彤",21);

     var stu=new Student();

     Student.prototype.grade=5;

     Student.prototype.intr=function(){

         alert(this.grade);

     }

     stu.sayHello();//输出：使用原型得到Name:洪如彤

     stu.intr();//输出：5

 </script>

 </body>

 </html></SPAN></SPAN>

2.构造函数实现继承

 <SPAN style="FONT-SIZE: 18px"><html>

 <body>

 <script type="text/javascript">

     function  Parent(name){

         this.name=name;

         this.sayParent=function(){

             alert("Parent:"+this.name);

         }

     }  

     function  Child(name,age){

         this.tempMethod=Parent;

         this.tempMethod(name);

         this.age=age;

         this.sayChild=function(){

             alert("Child:"+this.name+"age:"+this.age);

         }

     }  

     var parent=new Parent("江剑臣");

     parent.sayParent(); //输出：“Parent:江剑臣”

     var child=new Child("李鸣",24); //输出：“Child:李鸣 age:24”

     child.sayChild();

 </script>

 </body>

 </html></SPAN>

3.call , apply实现继承

 <SPAN style="FONT-SIZE: 18px"><html>

 <body>

 <script type="text/javascript">

     function  Person(name,age,love){

         this.name=name;

         this.age=age;

         this.love=love;

         this.say=function say(){

             alert("姓名："+name);

         }

     }  

     //call方式

     function student(name,age){

         Person.call(this,name,age);

     }  

     //apply方式

     function teacher(name,love){

         Person.apply(this,[name,love]);

         //Person.apply(this,arguments); //跟上句一样的效果，arguments

     }  

     //call与aplly的异同：

     //1,第一个参数this都一样,指当前对象

     //2,第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以）  

     var per=new Person("武凤楼",25,"魏荧屏"); //输出：“武凤楼”

     per.say();

     var stu=new student("曹玉",18);//输出：“曹玉”

     stu.say();

     var tea=new teacher("秦杰",16);//输出：“秦杰”

     tea.say();  

 </script>

 </body>

 </html></SPAN>

二、call和apply的用法（详细介绍）

js中call和apply都可以实现继承，唯一的一点参数不同，func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])。

JS手册中对call的解释：

 <SPAN style="FONT-SIZE: 18px">call 方法

 调用一个对象的一个方法，以另一个对象替换当前对象。  

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

 参数

 thisObj

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

 arg1, arg2,  , argN

 可选项。将被传递方法参数序列。  

 说明

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

 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。</SPAN>

说简单一点，这两函数的作用其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。下面以apply为例，说说这两个函数在 js中的重要作用。如：

 <SPAN style="FONT-SIZE: 18px"> function Person(name,age){   //定义一个类

         this.name=name;     //名字

         this.age=age;       //年龄

         this.sayhello=function(){alert(this.name)};

     }

     function Print(){            //显示类的属性

         this.funcName="Print";

         this.show=function(){

             var msg=[];

             for(var key in this){

                 if(typeof(this[key])!="function"){

                     msg.push([key,":",this[key]].join(""));

                 }

             }

             alert(msg.join(" "));

         };

     }

     function Student(name,age,grade,school){    //学生类

         Person.apply(this,arguments);//比call优越的地方

         Print.apply(this,arguments);

         this.grade=grade;                //年级

         this.school=school;                 //学校

     }

     var p1=new Person("卜开化",80);

     p1.sayhello();

     var s1=new Student("白云飞",40,9,"岳麓书院");

     s1.show();

     s1.sayhello();

     alert(s1.funcName);</SPAN>

另外，Function.apply()在提升程序性能方面有着突出的作用：
我们先从Math.max()函数说起，Math.max后面可以接任意个参数，最后返回所有参数中的最大值。
比如

 <SPAN style="FONT-SIZE: 18px">alert(Math.max(5,8));   //8

     alert(Math.max(5,7,9,3,1,6));   //9   

     //但是在很多情况下，我们需要找出数组中最大的元素。   

     var arr=[5,7,9,1];

     //alert(Math.max(arr));    // 这样却是不行的。NaN   

     //要这样写

     function getMax(arr){

         var arrLen=arr.length;

         for(var i=0,ret=arr[0];i<arrLen;i++){

             ret=Math.max(ret,arr[i]);

         }

         return ret;

     }  

     alert(getMax(arr)); //9   

     //换用apply，可以这样写

     function getMax2(arr){

         return Math.max.apply(null,arr);

     }  

     alert(getMax2(arr)); //9   

     //两段代码达到了同样的目的，但是getMax2却优雅，高效，简洁得多。   

     //再比如数组的push方法。

     var arr1=[1,3,4];

     var arr2=[3,4,5];

     //如果我们要把 arr2展开，然后一个一个追加到arr1中去，最后让arr1=[1,3,4,3,4,5]

     //arr1.push(arr2)显然是不行的。 因为这样做会得到[1,3,4,[3,4,5]]   

     //我们只能用一个循环去一个一个的push(当然也可以用arr1.concat(arr2)，但是concat方法并不改变arr1本身)   

     var arrLen=arr2.length;

     for(var i=0;i<arrLen;i++){

         arr1.push(arr2[i]);

     }  

     //自从有了Apply,事情就变得如此简单   

     Array.prototype.push.apply(arr1,arr2); //现在arr1就是想要的结果</SPAN>

js中继承的几种用法总结(apply,call,prototype)的更多相关文章

  1. JS中this的四种用法

    1.在一般函数方法中使用 this 指代全局对象 2.作为对象方法调用,this 指代上级对象 3.作为构造函数调用,this 指代new 出的对象 4.apply 调用 ,apply方法作用是改变函 ...

  2. JS中 this 的四种用法

    1.在一般函数中使用 this 指全局对象 window function fn(){ this.x = 1 } fn(); //相当于window.fn() 2.作为对象方法使用 this 指该对象 ...

  3. js中this 的四种用法

    this 在函数执行时,this 总是指向调用该函数的对象.要判断 this 的指向,其实就是判断 this 所在的函数属于谁. 在<javaScript语言精粹>这本书中,把 this  ...

  4. js 中继承的几种方式

    继承的方式一共有三种: 一.原型继承 通过prototype   来实现继承. function Person(name,age) { this.name=name; this.age=age; } ...

  5. 第22篇 js中的this指针的用法

    前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...

  6. js中的this指针的用法

    首先看下面代码: function funcA() { this.name = "hello"; console.log(this.name); this.show = funct ...

  7. js正则表达式中的问号几种用法小结

    这篇文章主要介绍了js正则表达式中的问号几种用法,比如+?,*?,{2,3}?可以停止匹配的贪婪模式,感兴趣的朋友可以参考下 在表示重复的字符后面加问号,比如+?,*?,{2,3}?可以停止匹配的贪婪 ...

  8. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  9. a标签中href=""的几种用法（转）

    a标签中href=""的几种用法   标签: html / a标签 / javascript 46371 众所周知,a标签的最重要功能是实现超链接和锚点.而且,大多数人认为a标签最 ...

随机推荐

  1. Kl 证明 凸函数

    回到随机变量传输问题,假设传输中我们不知道具体 分布情况(unknown),我们用一个已知的分布 ,来模拟它,那么在这种情况下如果我们利用 尽可能高效的编码,那么我们平均需要多少额外的信息量来描述x呢 ...

  2. mipi和dsi

    转自: http://blog.csdn.net/longxiaowu/article/details/24410021 一.MIPI MIPI(移动行业处理器接口)是Mobile Industry ...

  3. Python 小游戏 Bunny

    最近在学习Python,所以上网找了一个小程序练练手. 关于这款名为[Bunny]的小游戏,详细请看下面的链接: http://www.oschina.net/translate/beginning- ...

  4. Delphi 的知识体系

    第一部分   快速开发的基础 第1章   Delphi 5下的Windows编程    1 1.1   Delphi产品家族    1 1.2  Delphi是什么    3 1.2.1   可视化开 ...

  5. GoLang搞一个基本的HTTP服务

    慢慢和python的对应一下看看. package main import ( "fmt" "net/http" "strings" &qu ...

  6. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  7. DevExpress DXperience 的本地化（汉化）方法

    Devexpress的.net组件目前非常流行,在国内开发者中有非常高的热度,但是由于是国外控件,我们经常遇到的一个问题是汉化.目前Devexpress公司2011.2版以后使用了统一的本地化模式,针 ...

  8. Ubuntu下Chromium for Android 源码的编译

    转自:http://blog.csdn.net/leer168/article/details/9146689 一.环境Ubuntu10.4.4 -desktop-amd64 + VMware Wor ...

  9. OD附加功能分析

    OD版本:OllyICE v1.10   在从文件菜单选择附加后,OD会在注册一个窗口类后,先创建一个0x138大小的进程表; 再是CreateWindowExA 创建窗口;   00478013 l ...

  10. slide.js使用文档

    <!doctype html> <head> <script src="js/jquery-latest.min.js"></script ...