javascript(js)创建对象的模式与继承的几种方式
Posted 无敌小阿没
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript(js)创建对象的模式与继承的几种方式相关的知识，希望对你有一定的参考价值。
1.js创建对象的几种方式
工厂模式
为什么会产生工厂模式，原因是使用同一个接口创建很多对象，会产生大量的重复代码，为了解决这个问题，产生了工厂模式。
function createPerson(name,age,job){
var o=new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
console.log(this.name);
}
return o;
}
var person1=createPerson("kobe","34","player");
var person2=createPerosn("patty","32","singer");
构造函数模式
与工厂模式不同的是，没有显示的创建对象,直接将属性和方法赋值this对象，没有return语句。
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
console.log(this.name);
};
}
var person1=new Person();
var person2=new Person();
console.log(person1.sayName==person2.sayName)//false 说明不同实例的同名函数是不相等的
如果我们想要的结果是两者相等，可以这样实现
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=sayName;
}
function sayName(){
console.log(this.name);
}
var person1=new Person();
var person2=new Person();
console.log(person1.sayName==person2.sayName);//true
创建Person的新实例，需要用到new操作符，这种方式下调用构造函数会经历四个阶段，分别是：
创建一个新对象
将构造函数的作用域赋值给这个新的对象
执行构造函数中的代码
返回新对象
person1和person2这两个对象都有一个constructor属性，该属性指向Person
console.log(person1.constructor==Person);//true
console.log(person2.constructor==Person);//true
原型模式
特点：新对象的这些属性和方法是所有实例共享的
function Person(){
}
Person.prototype.name="kobe";
Person.prototype.age=38;
Person.prototype.sayName=function(){
console.log(this.name);
}
var person1=new Person();
var person2=new Person();
console.log(person1.sayName==person2.sayName);//true
有时候我们想知道该属性到底是存在对象中还是存在原型中，可以使用以下方法
我们使用in操作符和hasOwnProperty结合判断
"name" in object无论该属性到底存在原型中还是对象中，都会返回true
而hasOwnProperty只有存在实例中才返回true
so：只有in操作符返回true，而hasOwnProperty返回false，能确定属性是原型中的属性。
function hasPrototypeProperty(object,name){
return !object.hasOwnProperty(name)&&(name in object);
}
原型对象存在问题，牵一发而动全身
function Person(){
}
Perosn.prototype=function(){
constructor;Person,
name:"kobe",
age:"29",
job:"player",
friends:["shely","count"],
sayName:function(){
console.log(this.name);
}
};
var person1=new Person();
var person2=new Person();
person1.friends.push("ann");
console.log(person1.friends===person2.friends);//true
解决的方法：是使用构造函数模式和原型模式
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.friends=["she","ya"];
}
Person.prototype={
constructor:Person,
sayName:function(){
console.log(this.name);
}
};
var person1=new Person();
var person2=new Person();
person1.friends.push("VAN");
console.log(person1.friends===person2.friends);//false
动态原型模式
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
if(typeof this.sayName!="function"){
Person.prototype.sayName=function(){
console.log(this.name);
}
};
}
寄生构造函数模式
function Person(name,age,job){
var o=new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
console.log(this.name);
};
return o;
}
var friend=new Person();//此模式与工厂模式十分类似
2.js实现继承的几种方式
原型链继承:原型对象属性共享
function Parent2(){
this.name="kobe";
this.play=[1,2,3];
}
function Child2(){
this.type="children";
}
Child2.prototype=new Parent2();
var say1=new Child2();
var say2=new Child2();
say1.play.push("van");
console.log(say1.play==say2.play);//true
借用构造函数实现继承：无法实现继承原型对象
function Parent1(){
this.name="kobe";
}
Parent1.prototype.age=90;
function Child(){
Parent1.call(this);
this.type="service";
}
var say=new Child();
console.log();//error
组合式继承
function Parent4(name){
this.name="kobe";
this.play=[1,2,3];
}
Parent4.prototype.sayName=function(){
}
function Child4(name,age){
Parent3.call(this,name);
this.age=age;
}
Child4.prototype=new Parent4();
Child4.prototype.constructor=Child4;
Child4.prototype.sayAge=function(){
console.log(this.age);
};
var ins1=new Child4();
var ins2=new Child4();
ins1.push.push(4);
console.log(ins1.play==ins2.play);//false
原型式继承
function object(){
function F(){}
F.prototype=o;
return new F();
}
var person={
name:"kobe",
friends;["yang","du","geng"]
};
var onePerson=object(person);
var twoPerson=object(person);
寄生式继承
function object(o){
function F(){}
F.prototype=o;
return new F();
}
function create(o){
var clone=object(o);
clone.sayHi=function(){
console.log("hi");
};
return clone;
}
var person={
name:"kobe",
friends:["james","waston","sun"]
};
var anotherPerson=creat(person);
anotherPerson.sayHi();//hi
寄生式组合继承
function inheritPrototype(Child5,Parent5){
var prototype=Object(Parent5.prototype);
prototype.constructor=Child5;
Child5.prototype=prototype;
}
function Parent5(name){
this.name=name;
this.colors=["red","blue","green"];
}
Parent5.prototype.sayName=function(){
console.log(this.name);
};
function Child5(name,age){
Parent5.call(this.name);
this.age=age;
}
inheritPrototype(Child5,Parent5);
Child5.prototype.sayAge=function(){
console.log(this.age);
};
以上是关于javascript(js)创建对象的模式与继承的几种方式的主要内容，如果未能解决你的问题，请参考以下文章