JS：面向对象（进阶篇）

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

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

复制代码
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程序设计

这里我想说的是，还有种继承的方法，还更安全点，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);
// 22
instance1.sayAge();
// 25
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，看上面的结果，不管是父类的方法还是子类的方法是共享的，然后属性却都是自己的内存里面的，这很符合我们的要求，即方便又省内存，到此，就差不多了，有错的话欢迎指正👏。

posted @   await  阅读(534)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示