js自定义类和对象及继承

…衆ロ難τιáo~ 提交于 2020-03-27 05:19:36

1.工厂方式
<script type="text/javascript">

function createObject(name){

       var p = new Object();

       p.name=name;

       p.say = function(){alert(p.name+'ff');}

       return p;

}

var p1 = createObject("p1");

var p2 = createObject("p2");

alert(p1.name+" "+p2.name);

p1.say();p2.say();

alert(p1.say==p2.say); //false

</script>

问题:每创建一个对象,对象的方法是新对象,浪费资源



2、构造函数方式

<script type="text/javascript">

function Person(name){

this.name = name;

this.say = function(){

alert("I am "+this.name);

}

}

var p1 = new Person("wang");

var p2 = new Person("li");

p1.say();

p2.say();

alert(p1.say==p2.say); //false



</script>



问题:

创建对象时比工厂方法更易于理解。

和工厂方法一样,每个对象都有自己的方法,浪费资源。





3、原型方式



function Person(){}

Person.prototype.name = "";

Person.prototype.say = function(){

alert("I am "+this.name);

}



var p1 = new Person();

var p2 = new Person();

alert(p1.say == p2.say);//true



问题:无法在构造方法中传递参数,所有对象共享属性。

优点:对象共方法,节约资源。



4、构造方法+原型方式

function Person(name){

       this.name = name;

}

Person.prototype.say = function(){

       alert("I am "+this.name);

}

var p1 = new Person("wang");

var p2 = new Person("li");

p1.say();

p2.say();

alert(p1.say==p2.say); //true



优点:解决了前面提到的问题。

问题:封装不够完美。



5、动态原形方式

function Person(name){

this.name = name;

if(Person.prototype.say == undefined){

       Person.prototype.say = function(){

              alert("I am "+this.name);

              }

       }

}

var p1 = new Person("wang");

var p2 = new Person("li");

p1.say();

p2.say();

alert(p1.say==p2.say); //true



结论:一种完美的解决方案。



6、对象的创建 - JSON

var person = {};



var girl = {

name:“miss wang”,

age:20,

show = function(){

       alert("my name is " + this.name);

}

}



继承的实现方式

1、  对象冒充



function People(name){

this.name = name;

this.say = function(){

alert("I am "+this.name);

       }

}

function WhitePeople(name){

this.inherit = People;

this.inherit(name);

delete this.inherit;



this.color = function(){

              alert("I am white people.");

}

}

var p = new WhitePeople("wang");

p.say();

p.color();

alert(p instanceof People); //false

结论:支持多重继承,但后面的类可以覆盖前面类的属性和方法。继承后的对象类型和父类对象不匹配



2、利用call()和apply()冒充

function People(name,age){

this.name = name;

this.age = age;

this.say = function(){

alert("I am "+this.name+"  "+this.age);

       }

}

function WhitePeople(name,age){

//People.call(this,name,age);//call方式以多个参数进行传值

People.apply(this,[name,age]);//apply方式以数组方式进行传值



this.color = function(){

              alert("I am white people.");

}

}

var p = new WhitePeople("wang",34);

p.say();



p.color();



alert(p instanceof People);





3、原型链继承

//父类

function People(name){

       this.name = name;

}

People.prototype.say = function(){

       alert("I am "+this.name);

}



//子类

function ChinaPeople(name,area){

       People.call(this,name);

       this.area = area;

}

ChinaPeople.prototype = new People();

ChinaPeople.prototype.from = function(){

       alert("I'am from "+this.area);

}



var p = new ChinaPeople("wang","si chuan");

p.say();

p.from();

alert(p instanceof People); //true

结论:不支持多重继承,继承后的对象类型和父类对象匹配

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!