- 前言
- 理解对象
- 创建对象
- 构造函数模式
- 原型模式
- 组合使用构造函数模式和原型模式
- 动态原型模式
- 寄生构造函数模式
- 稳妥构造函数模式
- 继承
- 如何继承
- 原型链
- 借用构造函数
- 组合继承
- 原型式继承
- 寄生式继承
- 寄生组合式继承
- 确定原型和实例的关系?
- 1. 使用
instanceof - 2. 使用
isPrototypeOf()
- 1. 使用
- 如何继承
前言
本文是《JavaScript高级程序设计》中第六章的面向对象程序设计的几个 构造函数模式的笔记
理解对象
// ...
创建对象
// ...
构造函数模式
先来看看典型的构造函数:
function Person(name,age,job){
this.name=name;
this.age=age;
this.sayName=function(){
console.log(this.name);
};
}
var person1=new Person("小明",20);
由上边可以直接看出构造函数模式的特点:
- 直接将属性和方法赋给了 this 对象;
- 没有 return 语句
- 没有 显式创建对象
优点:
直观,方便,符合OO编程直觉上的使用
存在的问题:
每个方法都会在实例上重新创建一遍,导致了每一个person1 / person2 等实例之间的sayName()方法其实是不相等的
person1.sayName==person2.sayName
//false
原型模式
无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个protoype属性,这个属性指向函数的原型对象.
那么:
function Person(){}
Person.prototype.name="小明";
Person.prototype.age=20;
Person.prototype.sayName=function(){
console.log(this.name);
};
var person1=new Person();
但是这样写太麻烦了,想想每次要增加一个属性,就得写一长串的Person.prototype.xxx
所以可以简略为:
function Person(){}
Person.prototype={
name:"小明",
age:20,
sayName:function(){
console.log(this.name);
}
};
但是要注意的是, 这种做法本质上 是 完全重写了默认的prototype 对象,因此 constructor属性也就变成了指向Object构造函数的constructor属性,不再指向Person函数.
虽然 instanceof 操作符仍能返回正确结果,但constructor无法确定对象类型:
var friend=new Person();
friend instanceof Object //true
friend instanceof Person //true
friend.constructor == Person //false
friend.constructor == Object //true
//我的疑问:
//既然instanceof能确定对象类型,那为什么还要把constructor显式转为Person?
所以最好要加上 constructor:Person
function Person(){}
Person.prototype={
constructor:Person,
name:"小明",
age:20,
sayName:function(){
console.log(this.name);
}
};
注意的是,当以这种方式重设constructor属性会导致它的 [[Enumerable]]特性被设置为true.
在默认情况下,原生的constructor属性是不可枚举的,因此在兼容ES5的情况下,使用Object.defineProperty()
Object.defineProperty(Person.prototype,"constructor",{
enumerable:false,
value:Person
});
//我的疑问:
//那假如我不把它设置为false又会怎样?
但是原型模式存在着一个很大的问题, 就是其共享的本性!
原型中所有属性都是被实例共享的,对于包含引用类型值(非基础类型)的属性来说,就很糟糕:
function Person(){}
Person.prototype={
constructor:Person,
name:"小明",
age:20,
friends:["sb","nb"]
};
var person1=new Person();
var person2=new Person();
person1.friends.push("Van");
console.log(person1.friends); //"sb,nb,Van"
console.log(person2.friends); //"sb,nb,Van"
console.log(person1.friends===person2.friends); //true
组合使用构造函数模式和原型模式
既然 构造函数模式的实例的方法和属性没有存在共享性,而原型模式的方法能保持方法的引用,那么结合起来就是 ,利用构造函数模式的方式来使得属性没有共享性,再利用原型模式使方法都能共用!
function Person(name,age){
this.name=name;
this.age=age;
this.friends=["sb","nb"];
}
Person.prototype={
constructor:Person,
sayName:function(){
console.log(this.name);
}
};
var person1=new Person("xm",20);
动态原型模式
但问题还是有的, 在其他OO开发人员看到这样独立的构造函数和原型的时候,第一感觉是懵逼的, 所以 动态原型模式 应运而生.
它把所有信息都封装在构造函数中 , 然后在构造函数中初始化原型,这样能够同时保证之前组合方式的优点.
function Person(name,age){
this.name=name;
this.age=age;
if(typeof this.sayName != "function"){
Person.prototype.sayName=function(){
console.log(this.name);
}
}
//这只会在sayName()方法不存在的情况下才会添加到原型
//一旦添加到原型之后,再次创建实例的时候,原型已经存在了这个方法.
//只需要用if检查一个方法之后全部写到prototype中即可,不用每一个方法都写一个if
}
寄生构造函数模式
跟简单工厂模式只有 调用时new的差别:
简单工厂:
function createPerson(name,age){
var o =new Object();
o.name=name;
o.age=age;
o.sayName=function(){
//...
}
return o;
}
var person1=createPerson("a",20);
寄生构造函数模式:
function createPerson(name,age){
var o =new Object();
o.name=name;
o.age=age;
o.sayName=function(){
//...
}
return o;
}
var person1=new createPerson("a",20);
这个模式可以在特殊情况下为对象创建构造函数,例如:
我们想创建一个具有额外方法的特殊数组,因为不能简单粗暴地直接修改Array构造函数,所以可以使用一下模式:
function SpecialArray(){
var values= new Array();
values.push.apply(values,arguments);
values.toPipedString=function(){
return this.join("|");
};
return values;
}
var colors=new SpecialArray("red","blue","green");
colors.toPipedString();
// "red|blue|green"
稳妥构造函数模式
- 不使用
this - 不使用
new操作符调用构造函数
function Person(name, age, job) {
var o = new Object();
// private members
var nameUC = name.toUpperCase();
// public members
o.sayName = function() {
alert(name);
};
o.sayNameUC = function() {
alert(nameUC);
};
return o;
}
var person = Person("Nicholas", 32, "software Engineer");
person.sayName(); // "Nicholas"
person.sayNameUC(); // "NICHOLAS"
alert(person.name); // undefined
alert(person.nameUC); // undefined
除了调用本身提供的sayName()方法外,没有别的方式可以访问到其数据成员.故而这种方式提供了良好的安全性,适合在某些安全执行环境中.
继承
如何继承
原型链
直接上代码好理解
//先用 组合构造函数模式和原型模式 创建两个类型:
function Animal(){
this.name="animal";
}
Animal.prototype.getName=function(){
return this.name;
}
function Dog(){
this.age=2;
}
//用Animal的实例重写Dog的原型
//Dog 将会获得Animal全部的属性和方法
//这就实现了继承
Dog.prototype=new Animal();
Dog.prototype.getAge=function(){
return this.age;
}
var adog=new Dog();
adog.getAge(); //2
但是你有没有注意到 , 这样实现继承的时候,Dog的原型是一个Animal 的实例.
当Animal中存在一个引用值类型的属性时, 会出现什么问题?
function Animal(){
this.colors=["red","blue","green"];
}
function Dog(){}
Dog.prototype=new Animal();
Dog.prototype.constructor=Dog;
var adog=new Dog();
adog.colors.push("black");
var bdog=new Dog();
console.log(bdog);
// "red,blue,green,black"
由上面代码可以看出,这导致了每个实例都对父类的引用值类型产生了共享性.
所以一般很少会单独使用原型链来实现继承.
那么 , 接下来祭出 构造函数
借用构造函数
function Animal(){
this.colors=["red","blue"];
}
function Dog(){
Animal.call(this);
}
var adog=new Dog();
adog.colors.push("black");
var bdog=new Dog();
console.log(bdog);
//"red,blue"
除了能解决 引用值类型的共享性问题之外, 相对于 单独使用原型链还有一个很大的优势 , 也就是能在子类型构造函数中向 父类构造函数传递参数
function Animal(name){
this.name=name;
}
function Dog(){
Animal.call(this,"dog");
//dog 属性
this.age=2;
}
var adog=new Dog();
adog.name //"dog"
adog.age //2
按照之前的 通过构造函数/原型链 来创建对象 的经验就知道 , 单独使用某一种模式都会顾此失彼,最好就是双剑合璧,那就是 组合继承. 这也是最常用的继承模式.
组合继承
function Animal(name){
this.name=name;
this.colors=["red","blue"];
}
Animal.prototype.sayName=function(){
console.log(this.name);
}
function Dog(name,age){
Animal.call(this,name);
this.age=age;
}
Dog.prototype=new Animal();
Dog.prototype.constructor=Dog;
Dog.prototype.sayAge=function(){
console.log(this.age);
}
var adog=new Dog("a",2);
adog.colors.push("black");
adog.colors; //"red,blue,black"
adog.sayName(); // "a"
adog.sayAge(); // 2
var bdog=new Dog("b",3);
bdog.colors; //"red,blue"
bdog.sayName(); //"b"
bdog.sayAge(); //3
这样adog和bdog 就能分别拥有自己的属性,也能同时使用相同的方法.
原型式继承
借助原型基于已有对象来创建新对象,同时不必因此创建自定义类型.
function object(o){
function F(){}
F.prototype=o;
return new F();
}
很显然这跟上边 使用原型链实现继承的方式非常相似 , 它们之间 在调用的时候就差了一个 new,这是因为函数object()把传进去的实例直接赋给了 临时函数的 prototype.
ES5 中 新增了一个 Object.create() 方法规范花了原型式继承
注意,这种原型式继承,当包含着引用类型值时会时钟共享相应的值,跟原型链实现继承一样
寄生式继承
function createAnother(original){
var clone =object(original);
clone.sayHi=function(){
console.log("hi");
}
return clone;
}
也就是通过浅拷贝原有对象,然后在内部以某种方式增强对象,最后返回对象.
这跟单用构造函数模式类似, 但由于不能做到函数复用而降低效率.
寄生组合式继承
现在先回顾一下组合继承:
function Animal(name){
this.name=name;
this.colors=["red","blue"];
}
Animal.prototype.sayName=function(){
console.log(this.name);
}
function Dog(name,age){
Animal.call(this,name); //第二次: 创建Dog实例时候
this.age=age;
}
Dog.prototype=new Animal(); //第一次 : 创建子类型原型的时候
Dog.prototype.constructor=Dog;
Dog.prototype.sayAge=function(){
console.log(this.age);
}
var adog=new Dog("a",2);
虽说组合继承这是最常用的继承模式,但它有一些不足,就是无论什么情况下,都会调用两次父类的构造函数.
那么如何解决呢
接下来就是寄生组合式继承登场了
function Animal(name){
this.name=name;
this.colors=["red","blue"];
}
Animal.prototype.sayName=function(){
console.log(this.name);
}
function Dog(name,age){
Animal.call(this,name);
this.age=age;
}
Dog.prototype=object(Animal.prototype);
Dog.prototype.constructor=Dog;
Dog.prototype.sayAge=function(){
console.log(this.age);
}
var adog=new Dog("a",2);
抽象出逻辑就是:
function inheritPrototype(subType,superType){
var prototype=object(superType.prototype);
prototype.constructor=subType;
subType.prototype=prototype;
}
等价于
function Animal(name){
this.name=name;
this.colors=["red","blue"];
}
Animal.prototype.sayName=function(){
console.log(this.name);
}
function Dog(name,age){
Animal.call(this,name);
this.age=age;
}
// Dog.prototype=object(Animal.prototype);
// Dog.prototype.constructor=Dog;
inheritPrototype(Dog,Animal);
Dog.prototype.sayAge=function(){
console.log(this.age);
}
var adog=new Dog("a",2);
确定原型和实例的关系?
以上面的 adog 为例子 :
有两个方法:
1. 使用 instanceof
adog instanceof Object //true
adog instanceof Animal //true
adog instanceof Dog //true
2. 使用 isPrototypeOf()
Object.prototype.isPrototypeOf(adog) //true
Animal.prototype.isPrototypeOf(adog) //true
Dog.prototype.isPrototypeOf(adog) //true