JS之继承(摘自高程)

原型链

    function SuperType(){

    }
    SuperType.prototype.name="name";

    SuperType.prototype.sayName= function () {
        return this.name;
    };
    function SubType(){

    }
    SubType.prototype=new SuperType();   //将SuperType函数的实例赋给SubType函数的原型,改变了SubType函数的原型

    var obj=new SubType();
    alert(obj.sayName());

原型继承的缺点:

1、最主要的问题是来自包含引用类型值的原型

    function SuperType(){
        this.colors=["red","blue","green"];
    }
    function SubType(){

    }
    SubType.prototype=new SuperType();
    var instance1=new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);         //"red","blue","green","black"
    var instance2=new SubType();
    alert(instance2.colors);         //"red","blue","green","black"

第二个问题:没法在不影响所有对象实例的情况下,给超类型的构造函数传递参数

借用构造函数  (    在超类型的原型中定义的方法,对子类型而言也是不可见的     )  

function SuperType(name){
this.name=name;
}

function SubType(name){
SuperType.call(this,"lily");
}
var instance1=new SubType();
console.log(instance1.name);

缺点:构造函数的诟病,无法复用函数

组合继承

    function SuperType(name){
        this.name=name;
        this.colors=["red","blue","green"];

    }
    SuperType.prototype.sayName= function () {

        return this.name;

    };
    function SubType(name,age){

        SuperType.call(this,name);
        this.age=age;
    }
    SubType.prototype=new SuperType();
    SubType.prototype.constructor=SubType;
    SubType.prototype.sayAge= function () {
        return this.age;
    };

    var instance=new SubType("lily",25);
    instance.colors.push("black");
    console.log(instance.colors);
    console.log(instance.sayAge());
    console.log(instance.sayName());

    var instanceAgain=new SubType("lucy",26);
    console.log(instanceAgain.colors);
    console.log(instanceAgain.sayAge());
    console.log(instanceAgain.sayName());

原型式继承

    function object(o){
        function F(){}
        F.prototype=o;
        return new F();
    }

    var person={
        name:"lily",
        friend:["lucy","fang"]
    };
    var newPerson=object(person);
    var person1=newPerson.friend;
    var newFriend=person1.push("feng");
    console.log(person1);

    var newPerson02=object(person);
    var person2=newPerson02.friend;
    console.log(person2)

寄生式继承

    function object(person){
        function F(){}
        F.prototype=person;
        return new F();
    }
    function createAnother(original) {
        var clone=object(original);
        clone.sayHi= function () {
            alert("hi");
        };
        console.log(clone);
        return clone;

    }

    var person={
        name:"lily",
        friends:["fang","feng"]
    };
    var anotherPerson=createAnother(person);
    anotherPerson.sayHi();

    console.log(person);

缺点:不能做到函数复用而降低效率,与构造函数模式类似

寄生组合式继承(inheritPrototype(子类型构造函数,父类型构造函数))

    function object(obj){
        function F() {

        }
        F.prototype=obj;
        return new F();
    }
    function inheritPrototype(SubType,SuperType){
        var inherit=object(SuperType.prototype);
        inherit.constructor=SubType;
        SubType.prototype=inherit;

        return inherit;
    }
    function SuperType(name){
        this.name=name;
    }
    SuperType.prototype.sayName=function(){
        alert(this.name);
    };
    function SubType(name,age){

        SuperType.call(this,name);
        this.age=age;
    }
    inheritPrototype(SubType,SuperType);
    SubType.prototype.sayAge= function () {
        alert(this.age);
    };
    var person=new SubType("lily",25);
    person.sayAge();
    person.sayName();
时间: 2024-10-24 19:48:40

JS之继承(摘自高程)的相关文章

浅谈JS的继承

JS继承 继承是OO语言中最为人津津乐道的概念,许多OO语言都支持两种方式的继承:接口继承:实现继承. 接口继承:只继承方法签名. 实现继承:继承实际的方法. 由于ES里函数没有签名,所以在ES里面无法实现接口继承,ES只支持实现继承.                                                                                                                                    

js中继承的几种用法总结(apply,call,prototype)

本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"><html>   <body>  <script type="text/javascript"> 

JS对象继承篇

JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person(){ this.name = "Person"; } Person.prototype.getName = function(){ return this.name; }; function SuperPerson(name,sex){ this.name = name; this.sex

JS 类继承 原型继承

参考文档:JS原型继承和类继承 <script src="jquery-2.0.3.js"> </script> <script> /*//类继承 var father=function(){ this.age=53; this.say=function(){ console.log("name:"+this.name+",age:"+this.age); } }; var child=function(){

关于 JS 面向对象继承属性和方法的小例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>关于 JS 面向对象继承属性和方法的小例子</h1> </body> </html> <script> //人的构造函

js:深入继承

/** * js实现继承: * 1.基于原型链的方式 * 2.基于伪造的方式 * 3.基于组合的方式 */ 一.基于原型链的方式 function Parent(){ this.pv = "parent"; } Parent.prototype.showParentValue = function(){ console.log(this.pv); } function Child(){ this.cv = "child"; } //让Child的原型链指向Paren

JS组合继承的通用工具函数

此工具函数没实际意义,只是鉴于EXT的extend方法不太好理解,写了一个简化的extend方法,帮助理解. /** * */ E = {}; E.extend = function(sub, sup) { //借用构造函数 sub.prototype = sup; //保留父类的构造函数,以便在子类构造函数中用调用,将父类变量绑定在this下 sub.prototype.superclass = sup.constructor; //因为重写了构造函数所以重新指定constructor,以使i

js实现继承的5种方式

js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现方式可以实现多继承)实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值 Js代码   function Parent(firstname) { this.fname=firstname; this.age=40; this.sayAge=func

浅谈js中继承的理解和实现

一.前言 java.C#等正统面向对象语言都会提供类似extend之类的处理类的继承的方法,而javascript并没有提供专门的方法用于继承,在javascript中使用继承需要一点技巧.js中实例的属性和行为是由构造函数和原型两部分组成的,js的继承也分为这两部分.下面给大家分享一下在js中如何实现继承,讲的不对的地方望大家指正! 二.继承构造函数中的属性和行为 我们定义两个类Animal和Bird类,来实现js中类的继承. //定义Animal类 function Animal(name)