前言
理解对象
创建对象
- 构造函数模式
- 原型模式
- 组合使用构造函数模式和原型模式
- 动态原型模式
- 寄生构造函数模式
- 稳妥构造函数模式
继承
- 如何继承
  - 原型链
  - 借用构造函数
  - 组合继承
  - 原型式继承
  - 寄生式继承
  - 寄生组合式继承
- 确定原型和实例的关系?
  - 1. 使用 instanceof
  - 2. 使用 isPrototypeOf()

前言

本文是《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

构造函数-js-高级程序设计-第六章笔记

前言

理解对象

创建对象

构造函数模式

原型模式

组合使用构造函数模式和原型模式

动态原型模式

寄生构造函数模式

稳妥构造函数模式

继承

如何继承

原型链

借用构造函数

组合继承

原型式继承

寄生式继承

寄生组合式继承

确定原型和实例的关系?

1. 使用 `instanceof`

2. 使用 `isPrototypeOf()`

你可能感兴趣的:(构造函数-js-高级程序设计-第六章笔记)

构造函数-js-高级程序设计-第六章笔记

前言

理解对象

创建对象

构造函数模式

原型模式

组合使用构造函数模式和原型模式

动态原型模式

寄生构造函数模式

稳妥构造函数模式

继承

如何继承

原型链

借用构造函数

组合继承

原型式继承

寄生式继承

寄生组合式继承

确定原型和实例的关系?

1. 使用 instanceof

2. 使用 isPrototypeOf()

你可能感兴趣的:(构造函数-js-高级程序设计-第六章笔记)

1. 使用 `instanceof`

2. 使用 `isPrototypeOf()`