1.工厂模式
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
alert(this.name);
}
return o;
}
- 使用方式
var gby = createPerson("gby", 28, "architect");
var dyx = createPerson("dyx", 28, "web");
2.构造函数(缺点:每个方法需要在原型上构建一遍,重复)
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
alert(this.name);
}
}
- 使用方式及测试
var person1 = new Person('wxx', 29, 'taobao');
var wl = new Person('wl', 39, 'free');
console.log("person1:constructor:", person1.constructor);
//检测对象类型
console.log(person1 instanceof Object);
console.log(person1 instanceof Person);
3.原型模式(原型上的引用类型如果被修改--所有的实例也会被修改--违背了每个实例需要有自己的独有属性的原则);
第1种写法
function Pro() {
};
Pro.prototype.name = "Nick";
Pro.prototype.age = 29;
Pro.prototype.job = "articher";
Pro.prototype.speakName = function () {
console.log(this.name);
};
- 使用方式
var pro1 = new Pro();
pro1.speakName();
var pro2 = new Pro();
pro2.speakName();
//测试某个原型是否是某个实例
console.log(Pro.prototype.isPrototypeOf(pro1));
console.log(Pro.prototype.isPrototypeOf(pro2));
//获取对象的原型__proto__
console.log("Object.getPrototypeOf(pro1):", Object.getPrototypeOf(pro1) == Pro.prototype);
//hasOwnProperty()判断属性存在于实例还是原型(属性存在于实例时才返回true)
console.log("hasOwnPrototype:", pro1.hasOwnProperty("name"));
pro1.like = "footer";
console.log("in:", ("like" in pro1));
console.log("in:", pro1.hasOwnProperty("like"));
第2种写法
//原型写法
function Propertys() {
};
var friend1 = new Propertys();
console.log("friend1.job:", friend1.job);
Propertys.prototype = {
constructor: Propertys,
name: "gby",
age: 29,
job: "free",
arr: ["gby", "dyx"]
};
console.log("friend1.job:", friend1.job);
var friends2 = new Propertys();
console.log("friends2.job:", friends2.job);
// 原型的弊端
var add1 = new Propertys();
add1.arr.push("wxl");
console.log("add1.arr:", add1.arr);
var add2 = new Propertys();
console.log("adds.arr:", add2.arr);
4.组合使用原型模式和构造函数模式;
function ConstructorPrototype(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}
ConstructorPrototype.prototype = {
constructor: ConstructorPrototype,
sayName: function () {
console.log("ConstructorPrototype.name:", this.name);
}
}
- 使用方式
var cons1 = new ConstructorPrototype("dyx", 29, "web");
var cons2 = new ConstructorPrototype("mm", 56, "peasant");
cons1.sayName();
cons2.sayName();
5.动态原型模式(确定某些方法是否存在--决定是否还需要初始化)
function DynamicConstructorPrototype(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
if (typeof sayName != "function") {
DynamicConstructorPrototype.prototype.sayName = function () {
console.log("DynamicConstructorPrototype.name:", this.name);
}
}
}
- 使用方式
var dyna1 = new DynamicConstructorPrototype("dyx1", 29, "web1");
dyna1.sayName();
6.寄生构造函数模式
function ParasiticConstructor(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
console.log("ParasiticPrototype.name:", this.name);
}
return o;
}
- 使用方式
var para1 = new ParasiticConstructor("dyx2", 29, "teacher");
para1.sayName();
function SpecialArray() {
//创建数组
var values = new Array();
//添加值
values.push.apply(values, arguments);
// 添加方法
values.piedString = function () {
return this.join("|");
}
return values;
}
var colors = new SpecialArray("red", "green", "blue");
console.log("colors:",colors.piedString());
7.稳妥构造函数模式(一:新创建的实例方法不引用this,二,不使用new操作符调用构造函数)
function ReliableConstructor(name,age,job){
//创建被返回的对象;
var o = new Object();
o.sayName=function(){
console.log("reliable:",name)
}
return o;
}
- 使用方式
var relibleName = ReliableConstructor("reliabledyx",29,"web");
relibleName.sayName();
//原型链
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 instance = new SubType();
console.log("instance:",instance.getSuperValue());
8.借用构造函数
function SupType(){
this.color=["red","green","yellow"];
}
function SbType(){
SupType.call(this);
}
- 使用方式
var colo1 = new SbType();
colo1.color.push("black");
alert(colo1.color);
var colo2 = new SbType();
alert(colo2.color);
原型扩展方法
String.prototype.startWidth = function (text) {
return this.indexOf(text) == 0;
};
var str = "hello world";
console.log(str.startWidth("hello"));
网友评论