码迷,mamicode.com
首页 > Web开发 > 详细

5种JS继承方法

时间:2016-01-11 12:19:01      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:5种js继承方法

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.jb51.net/" />

<title>5种JS继承方法</title>


<script type="text/javascript">

//1、原型链继承

function superType(){

this.property = true;

}

superType.prototype.getSuperValue = function(){

return this.property;

};

function subType(){

this.subProperty = false;

}

subType.prototype = new superType();

subType.prototype.getSubValue = function(){

return this.subProperty;

}; 

var intance = new subType();

alert(intance.getSubValue());


//2、借用构造函数继承

function superType(){

this.colors = ["red", "blue", "gray"];

}

function subType(){

superType.call(this);

}

var intance1 = new subType();

intance1.colors.push("green");

alert(intance1.colors);


var intance2 = new subType();

alert(intance2.colors);


//3、组合继承(原型链+借用构造函数)

function superType(){

this.name = name;

this.colors = ["red", "blak", "blue"];

}

superType.prototype.sayName = function(){

alert(this.name);

};

function subType(name, age){

superType.call(this, name);

this.age = age;

}

subType.prototype = new superType();

subType.prototype.sayAge = function(){

alert(this.age);

}

var intance1 = new subType("nicholas",23);

intance1.colors.push("green");

alert(intance1.colors);

intance1.sayName();

intance1.sayAge();

//4、寄生式继承

function object(o){

            function F(){}

            F.prototype = o;

            return new F();

        }

function createAnother(original){

var clone = object(original);

clone.sayHi = function(){

alert("hi");

};

return clone;

}

var person = {

name : "nicholas",

friends : ["Sheby", "Court", "van"]

};

var anotherPerson = createAnother(person);

anotherPerson.sayHi(); // hi


//5、寄生组合继承

 function object(o){

            function F(){}

            F.prototype = o;

            return new F();

        }


 function inheritPrototype(subType, superType){

            var prototype = object(superType.prototype);   //create object

            prototype.constructor = subType;               //augment object

            subType.prototype = prototype;                 //assign object

        }

                                

        function SuperType(name){

            this.name = name;

            this.colors = ["red", "blue", "green"];

        }

        

        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 instance1 = new SubType("Nicholas", 29);

        instance1.colors.push("black");

        alert(instance1.colors);  //"red,blue,green,black"

        instance1.sayName();      //"Nicholas";

        instance1.sayAge();       //29

        

       

        var instance2 = new SubType("Greg", 27);

        alert(instance2.colors);  //"red,blue,green"

        instance2.sayName();      //"Greg";

        instance2.sayAge();       //27

</script>

</head>

<body>


</body>

</html>


5种JS继承方法

标签:5种js继承方法

原文地址:http://iicoo.blog.51cto.com/10739372/1733624

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!