JS：面向对象（进阶篇）

时间：2021-08-16 11:33:40

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

构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享这对方法的引用，最大限度的节省了内存。

function Person (name,age) {

    this.name = name;

    this.age = age;

    this.friends = ['cjh','csb'];

}

Person.prototype = {

    constructor:Person,

    sayName:function  () {

        console.log(this.name);

    }

}

let person1 = new Person('aaa',22);

let person2 = new Person('bbb',26);

person1.friends.push('zxf');

// [ 'cjh', 'csb', 'zxf' ]

console.log(person1.friends);

// [ 'cjh', 'csb' ]

console.log(person2.friends);

// false

console.log(person1.friends === person2.friends);

//true

console.log(person1.sayName === person2.sayName);

我们已经达到目的了，这种构造函数与原型混成的模式，是目前用的比较广泛的。

稳妥构造函数模式

所谓稳妥对象，指的是没有公共属性，而且其他方法也不引用this的对象。稳妥对象最适合在一些安全的环境中（这些环境会禁止使用this和new），看个例子：

function Person (name) {

    let o = new Object();

    o.sayName=function(){

        console.log(name);

    }

    return o;

}

let f = Person('cjh');

// cjh

f.sayName();

// undefined

console.log(f.name);

这种其实很少用，就是把函数的参数当作Person的属性，只有函数内部才能访问。

原型链

终于讲到最终BOSS了，原型链可谓难到一大部分刚入门JS的同学（我也是）， 原型链主要作用之一就是继承，我们来看个例子：

function SuperType () {

    console.log('Super函数被执行')

    this.property = true;

}

SuperType.prototype.getSuperValue = function () {

    console.log('getSuperValue函数被执行了');

    return this.property;

}

function SubType () {

    this.subProperty = false;

}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {

    return this.subProperty;

}

let instance = new SubType();

console.log(instance.getSuperValue());

运行结果：

Super函数被执行
getSuperValue函数被执行了
true

这是实现继承的一种基本模式，定义两个类型SuperType和SubType，每个类型都有一个属性和一个方法，要实现subType继承SuperType，通过创建SuperType实例并赋值给SubType.prototype实现的。实现的本质是重写原型对象，代之以一个新类型的实例。换句话说，原来存在于SuperType的实例中的所有属性和方法，现在也存在于SubType.prototype中了。

JS：面向对象（进阶篇）

上图来自高级JS程序设计

这里我想说的是，还有种继承的方法，还更安全点，Object.create

上面的运行结果也看出来了，SuperType里面的代码被执行了，这就是new的能力，new的作用其实就是：

//new的时候做了什么

//会执行Base里面的代码

var o1 = new Base();

o1.[[Prototype]] = Base.prototype;

Base.call(o1);

而Object.create做了些什么：

/Object.create =  function (o) {

     var F = function () {};

//没有执行o函数里面的代码

     F.prototype = o;

     return new F();

};

所以上面的继承我们可以改为：

function SuperType () {

    console.log('Super函数被执行了');

    this.property = true;

}

SuperType.prototype.getSuperValue = function () {

    console.log('getSuperValue函数被执行了');

    return this.property;

}

function SubType () {

    this.subProperty = false;

}

SubType.prototype = Object.create(SuperType.prototype);

SubType.prototype.getSubValue = function () {

    return this.subProperty;

}

let instance = new SubType();

console.log(instance.getSuperValue());

运行结果：

getSuperValue函数被执行了
undefined

因为没有执行SuperType里面的函数，当这个函数里面要是创建对象和返回对象就会造成内存泄漏，所有this.property没有被声明和赋值，返回undefined，但是继承了所有方法和没有在函数里面声明的属性（在外面声明的）：

//这个函数没有被执行到
function SuperType () {

    console.log('Super函数被执行了');

    this.property = true;

}
//这个函数有被执行到

SuperType.prototype.getSuperValue = function () {

    console.log('getSuperValue函数被执行了');

    return this.property;

}

SuperType.prototype.name = 'cjh';

function SubType () {

    this.subProperty = false;

}

SubType.prototype = Object.create(SuperType.prototype);

SubType.prototype.getSubValue = function () {

    return this.subProperty;

}

let instance = new SubType();
//undefined

console.log(instance.property)
//cjh

console.log(instance.name);
//[Function: SuperType]

console.log(SuperType.prototype.constructor);

//[Function: SuperType]
console.log(SubType.prototype.constructor);

 

我们看最后两个结果：都是[Function: SuperType]，实际上，我们没有改变SubType.prototype的constructor的指向，还记得在JS面向对象（基础篇）里面讲过，默认情况下，所以原型对象都会自动获得一个constructor（构造函数）属性，并且constructor包含一个指向prototype属性所在函数的指针，我们改变了SubType.prototype=SuperType.prototype，所有construtor就自动指向了SuperType。

原型链的问题

function SuperType () {

    this.colors = ['red','green'];

}

function SubType () {

}

SubType.prototype = new SuperType();

let instance1 = new SubType();

instance1.colors.push("black");

// [ 'red', 'green', 'black' ]

console.log(instance1.colors);

let instance2 = new SubType();

// [ 'red', 'green', 'black' ]

console.log(instance2.colors);

在基本篇的时候讲过用原型模式来创建对象有个很大的问题：就是会共享属性，这个是我们不想看到的，因为每个对象都应该有它自己的一块内存，所有那时我们用组合模式来解决那个问题（就是在构造函数里面定一个各个对象的属性），一样的，现在也可以用组合继承来解决这个问题：

//原型链的组合继承

function SuperType (name) {
　　console.log('调用了Supertype');

    this.name = name;

    this.colors = ['red','green'];

}

SuperType.prototype.sayName = function  () {

    console.log(this.name);

}

function SubType (name) {

    //继承属性
　　//给每个实例分配自己的属性地址

    SuperType.call(this, name);

}
//第一次调用SuperType();

SubType.prototype = new SuperType();
//第二次调用SuperType(); 因为SubType函数里面的SuperType.call();

let instance1 = new SubType('cjh',22);
//第三次调用SuperType();因为SubType函数里面的SuperType.call();

let instance2 = new SubType('csb',24);

instance1.colors.push('black');

// [ 'red', 'green', 'black' ]

console.log(instance1.colors);

// [ 'red', 'green' ]

console.log(instance2.colors);

// cjh

instance1.sayName();

// csb

instance2.sayName();

这样是可以解决我们的问题，但是再看下结果：

调用了Supertype
调用了Supertype
调用了Supertype
[ 'red', 'green', 'black' ]
cjh
csb

上面的SuperType被执行了三次，但我们就创建了两个对象，第一次纯属多余，要想帮法去掉，在上面讲过我们用new关键字时，JS到时做了什么：

//new的时候做了什么

//会执行Base里面的代码

var o1 = new Base();

o1.[[Prototype]] = Base.prototype;

Base.call(o1);

看到了call这个函数，就是调用Base（）并且把o1传进去，但是这里的call没有任何作用，因为我们还没有创建对象时，它就call了。有个终极蛇皮版：

//subType:子类 superType：父类 => subType继承于superType

function inheritPrototype (subType, superType) {

    let prototype = Object.create(superType.prototype);

    //因为重写了subType的原型而失去的默认的constructor，所以指回subType

    prototype.constructor = subType;

    subType.prototype = prototype;

}

function SuperType (name) {

    console.log('调用了Supertype构造函数');

    this.name = name;

    this.colors = ['red','blue','green'];

}

SuperType.prototype.sayName = function () {

    console.log(this.name);

}

function SubType (name,age) {

    console.log('调用了SupType构造函数');

    SuperType.call(this, name);

    this.age = age;

}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function () {

    console.log(this.age);

}

let instance1 = new SubType('cjh',22);

let instance2 = new SubType('csb',25);

instance1.colors.push('black');

// [ 'red', 'blue', 'green', 'black' ]

console.log(instance1.colors);

// [ 'red', 'blue', 'green' ]

console.log(instance2.colors);

// true

console.log(instance1.sayName === instance2.sayName);

// true

console.log(instance1.sayAge === instance2.sayAge);

//false

console.log(instance1.name === instance2.name);

//

instance1.sayAge();

//

instance2.sayAge();

// cjh

instance1.sayName();

// csb

instance2.sayName();

// true

console.log(instance1 instanceof SubType);

//[Function: SubType],要是没写prototype.constructor = subType;，

//结果就是:[Function: SubType]，亲测

// [Function: SubType]

console.log(instance1.constructor);

运行结果：

调用了SupType构造函数
调用了Supertype构造函数
调用了SupType构造函数
调用了Supertype构造函数

现在创建一个对象分别调用一次SuperType和SubType，看上面的结果，不管是父类的方法还是子类的方法是共享的，然后属性却都是自己的内存里面的，这很符合我们的要求，即方便又省内存，到此，就差不多了，有错的话欢迎指正

相关文章