您的位置:首页 > Web前端 > JavaScript

JS面向对象的几种书写模式

2018-03-15 17:23 288 查看

工厂模式

//使用工厂模式 	即封装创建函数  达到复用功能  避免代码重复
function createPerson () {
var o = new Object();
o.name="cav";
o.sayname=function(){
alert("cevq");
}
return o;
}
构造函数模式
/*构造函数模式 构造函数可以当作函数来用  任何函数只要通过new来调用就可以作为一个构造函数
作为普通函数来用的话 属性和方法都添加给windows了(因为此时的this就是windows)*/
function Person (name,age) {
this.name=name;
this.age=age;
this.sayname=sayname;//此种方法可以解决创建多个对象时函数多次创建问题  即该函数是被person对象共享的   但是不推荐这么做
}
function sayname () {
alert("vewvew");
}
var person1=new Person("cav","vave");//需要使用new  用instanceof来判断对象类型

*原型模式使用原型模式(prototype 每个函数都有) :prototype是一个指针,指向原型对象,原型对象会有一个constructor属性(构造函数)  可将实例共享的方法或则属性包含到这里面,constructor指向本来创建的函数,每一个对象内部都有一个指针指向原型。
function Person () {
}
Person.prototype.name="vewvew";
Person.prototype.age="ewve";
Person.prototype.sayname=function () {
alert(this.name);
}
var person1=new Person();
var person2=new Person();
alert(person1.name==person2.name)//true
常用方法和注意事项[[Prototype]]指针:每个实例内部都有一个指向构造函数的原型的指针
isPrototypeOf():确定对象的[[Prototype]]指针是否指向原型对象
Object.getPrototypeOf():返回对象的[[Prototype]]指针指向的原型对象的prototype的值

读取对象属性或者方法的顺序:先在本对象中找 ,如果找不到 ,就"沿着该对象的[[Prototype]]指针指向的原型"去找。

delete 对象.属性

hasOwnProperty():检测一个属性是存在实例中还是存在原型中   在实例中时返回true 对象.hasOwnProperty(属性)

in:当通过对象能够访问属性时 返回true 语法: 属性 in 对象

for in 循环屏蔽了对象中不可枚举的属性  既包括存在实例中的属性也包括存在原型中的属性

Object.keys():参数是对象 返回一个该对象中所有的可枚举的实例属性

Object.getOwnPropertyNames():参数是对象  返回对象中所有属性 无论是否可以枚举

*更简单的原型模式语法

var person ={};
person.prototype={
constructor:person,//因为用字面量方式返回的是一个新的对象,所以新建的对象(花括号里面的)的constructor不再指向person  需要手动指定
name:"cewvew",
age:41,
sayname:function () {

}
};
//即使先创建对象 后在原型上修改  也能在对象上立即反应出来  但是不能全部重写原型对象  如果完全重写原型对象就切断了实例的[[Prototype]]指针和原型对象之间的关系
function Person () {
}
var person = new Person();//此时person的[[Prototype]]指向Person最初的原型对象
Person.prototype={//此时Person的原型对象被赋予了一个新的原型对象地址 因此上面的person的原型指针就不再指向Person的原型
name:"vewvewv"
}
person.name;//此时访问不了
组合使用构造函数和原型模式
//即在可以像构造函数里面传参 初始化对象的属性  然后调用原型重写的方式
function person (num1,num2) {
this.name=num1;
this.age=num2;
this.sayname=function(){
return this.name;
}
}
person.prototype={
constructor:person,
city:"vewv"
}

动态原型模式

//即在构造函数里加入判断条件  避免原型初始化之后相应属性重复初始化
if(typeof this.sayname!="function"){
person.prototype.sayname=function() {
alert("Cewvew");
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: