第21篇 js四种继承方式

原创 2015年11月18日 23:27:30

js是一个很自由的语言,没有强类型的语言的那种限制,实现一个功能往往有很多做法。继承就是其中的一个,在js中继承大概可以分为四大类,上面一篇文章也提及过一些,下面开始详细说说js的继承。

1、原型继承---最简单,最常用的

      

复制代码
function funcA(){
    this.show=function(){
        console.log("hello");
    }
}
function funcB(){

}
funcB.prototype=new funcA();
var b=new funcB();
b.show();
复制代码

这里是运用原型链的特性实现,缺点也是很明显,如果继承的层次比较多的话,修改顶层的原型的方法,会对下面所有的对象产生影响。

2、原型冒充:

   

复制代码
function funcA(age){
    this.name="xiaoxiao";
    this.age=age;
    this.show=function(){
        console.log(this.name+this.age)

    }
}
function funcB(){
    this.parent=funcA;
    this.parent(40);
    delete this.parent;

}
var b=new funcB();
b.show();
复制代码

这个继承的方法很好理解,只不过把funcA中的代码都拿到funcB中执行一下,其实可以解释成:

复制代码
function funcA(age){
    this.name="xiaoxiao";
    this.age=age;
    this.show=function(){
        console.log(this.name+this.age)

    }
}
function funcB(){
    // this.parent=funcA;
    // this.parent(40);
    // delete this.parent;
         //其实上面的过程只不是是把funcA搬过来
    this.name="xiaoxiao";
    this.age=age;
    this.show=function(){
        console.log(this.name+this.age)

    }

}
var b=new funcB();
b.show();
复制代码

明白了吗?

 

3callapply

这个在上面一篇文章到也提到了,也详细说明了原因,相信如果认真把原型的理解了这个就so easy.

下面不多说了,看看代码:

复制代码
function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {}
}
var a = new funcA();
var b = new funcB();
 funcA.call(b);//use call
a.show("a");
b.show("b");
复制代码

callapply效果是一样的,不过是传参方式上不一样,但是推荐用call,因为apply的效率会低很多,至于为什么,后面会说到。

4、复制继承

复制代码
function funcA(){
    this.name="hello";
    this.show=function(){
        console.log(this.name);
    }
}
function funcB(){
    this.extend=function(o){
        for(var p in o){
            this[p]=o[p];
        }
    }
}
var a=new funcA();
var b=new funcB();
b.extend(a);
b.show();
复制代码

这个类似于jqueryextend的方法,原理是把a中的属性遍历到b中。

好了,以上是今天的内容,比较简单,只要善于总结,这些相信在你的学习中会有帮助。下次写上下文中的this.


写于 2015.11.16

版权声明:本文为博主原创文章,未经博主允许不得转载。个人独立博客:http://blog.laofu.online/

js四种继承方式

js是一个很自由的语言,没有强类型的语言的那种限制,实现一个功能往往有很多做法。继承就是其中的一个,在js中继承大概可以分为四大类,上面一篇文章也提及过一些,下面开始详细说说js的继承。 1、原型继...
  • wxw_317
  • wxw_317
  • 2015年11月18日 16:16
  • 391

JS常见的继承方式

1.利用原型链prototype;function person() { this.name = 'person'; } person.prototype.show = function(){...
  • Szu_AKer
  • Szu_AKer
  • 2016年09月23日 23:20
  • 687

第21篇

文章部分
  • qq_35240110
  • qq_35240110
  • 2017年12月08日 15:25
  • 8

javascript的四种继承方式

1. 原型链继承 原型链概念:每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属...
  • sinat_34498624
  • sinat_34498624
  • 2017年04月19日 16:26
  • 197

js继承有5种实现方式,你知道几种?

js继承有5种实现方式: 1、继承第一种方式:对象冒充   function Parent(username){     this.username = username;     this.hell...
  • cometwo
  • cometwo
  • 2016年09月09日 18:45
  • 1791

Javascript的四种继承方式

http://blog.sina.com.cn/s/blog_5d64f7e301017mqr.html http://blog.csdn.net/unicode/article/detai...
  • sunshine_love
  • sunshine_love
  • 2014年03月26日 09:33
  • 457

JavaScript四种继承方式

原型继承 function Person(name,age){     this.name=name;     this.age=age; } Person.prototype.say=f...
  • liona_koukou
  • liona_koukou
  • 2016年08月09日 13:50
  • 155

求第N个质数算法

def calc_prime(prime,num): i,gab=7,2 while num>3: flag=True for x in prime: ...
  • lisulong1
  • lisulong1
  • 2016年09月08日 16:27
  • 198

梁勇2011JAVA语言程序设计基础篇第16章编程题16.8

鼠标事件
  • vivi_and_qiao
  • vivi_and_qiao
  • 2016年12月07日 17:31
  • 480

《Java编程思想第四版》笔记---21章(1) 并发

线程是进程中一个任务控制流序列,由于进程的创建和销毁需要销毁大量的资源,而多个线程之间可以共享进程数据,因此多线程是并发编程的基础。 多核心CPU可以真正实现多个任务并行执行,单核心CPU程序其实不是...
  • u012861467
  • u012861467
  • 2016年08月27日 00:19
  • 695
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第21篇 js四种继承方式
举报原因:
原因补充:

(最多只允许输入30个字)