js继承实现之Object.create

摘要：是对象的一个实例，并且的。可以自己定义它的属性，可写可配可枚举，均可自己定义，实现一条龙自助服务。这种方式比较适合父类为同级别，子类只要拥有相同的属性和方法即可的情况。如有异议处，欢迎大家指出来，一起探讨。

同事前几天去面试，回来同步了一下面试题库，其中一道题就是”new和Object.create的区别”。听到这个题目，我的第一个反映是 , what？( ⸝⸝⸝°_°⸝⸝⸝ )， Object.create这个东东我没有用过，怎么回答。为了避免无法给出response的尴尬，老夫抓紧一切时间开始在console里演示着。

-> demo <-

function Person(name, sex) {
   this.name = name;
   this.sex = sex;
}
Person.prototype.getInfo = function() {
   console.log("getInfo: [name:" + this.name + ", sex:" + this.sex + "]");
}
var a = new Person("jojo", "femal");
var b = Object.create(Person.prototype);

-> 分析 <-

赤裸裸的结果，a就是对象Person的实例，a.__proto__ === Person.prototype。what about b ? b是对象F的一个实例，并且b.__proto__ === Person.prototype的。

这个F到底是个啥呢? 好了，又到了copy-paste时间了，参考了https://developer.mozilla.org... 其实现的polyfill方法：

if (typeof Object.create !== "function") {
    //此方法未考虑create的第二个参数的实现
    Object.create = function (proto, propertiesObject) {
        if (typeof proto !== "object" && typeof proto !== "function") {
            throw new TypeError("Object prototype may only be an Object: " + proto);
        } else if (proto === null) {
            throw new Error("This browser"s implementation of Object.create is a shim and doesn"t support "null" as the first argument.");
        }

        if (typeof propertiesObject != "undefined") throw new Error("This browser"s implementation of Object.create is a shim and doesn"t support a second argument.");
        //实现一个隐藏函数
        function F() {}
        //函数的原型设置为参数传进来的原型
        F.prototype = proto;
        // 返回一个F函数的实例，即此实例的__proto__指向为参数proto
        return new F();
    };
}

好吧，既然都看了polyfill了，就知道Object.create到底是干啥的了，它就是生成了一个实例，这个实例的原型由我来指定，但是它的构造函数F被隐藏了。那下面我们来验证一下是不是这个逻辑。

通过Object.create()生成的实例怎么才能有自己的属性呢，别怕，我们看一下它完成的面目是怎样的，撒花，揭幕～～Object.create(proto, [propertiesObject])， 人家是有第二个参数滴。可以自己定义它的属性，可写、可配、可枚举，均可自己定义，实现一条龙自助服务。

var b = Object.create(Person.prototype, {
    name: {
        value: "coco",
        writable: true,
        configurable: true,
        enumerable: true,
    },
    sex: {
        enumerable: true,
        get: function(){ return "hello sex"},
        set: function(val){console.log("set value:" + val)}
    }
})

-> 更进一步 <-

说了这么多，那Object.create的应用价值到底是什么呢? 看一下本文标题就知道了，当然说的是继承了，操刀试一下。

function Student(name, sex, age) {
    Person.call(this, name, sex);
    this.age = age;
}
//原型链拼接
Student.prototype = Object.create(Person.prototype);
//构造函数弯了，纠正
Student.prototype.constructor = Student;
Student.prototype.getInfo = function() {
    console.log("getInfo: [name:" + this.name + ", sex:" + this.sex + ", age:" +this.age + "].");
}
    
var s = new Student("coco", "femal", 25);

s是Student的实例，Person.prototype在s的原型链上，并且这个F实例的constructor又指回了Student。
既然说到了这里，那如果想要一个对象继承多个类怎么办呢？在上面的代码基础上使用mixin加工下就可啦。

//再创建一个基类
function Animal(age) {
 this.age = age;
}
Animal.prototype.say = function(language) { 
    console.log("you say " + language);
}

function Student(name, sex, age) {
    Person.call(this, name, sex);
    Animal.call(this, age);
}
//原型链拼接
Student.prototype = Object.create(Person.prototype);
Object.assign(Student.prototype, Animal.prototype);
Student.prototype.constructor = Student;
Student.prototype.getInfo = function() {
    console.log("getInfo: [name:" + this.name + ", sex:" + this.sex + ", age:" +this.age + "].");
};
var s = new Student("coco", "femal", 25);

s的原型仍是一个F实例，其原型指向了Person，但是这个F实例上mixin了Animal的方法。但是原型链上并没有Animal什么事，通过instanceof可以验证这一点。这种方式比较适合父类为同级别，子类只要拥有相同的属性和方法即可的情况。

如有异议处，欢迎大家指出来，一起探讨。学习费脑掉了好多头皮屑，不过今天又可以碎个觉了。

∧__∧
( ●ω●)
｜つ／(＿＿＿
／└-(＿＿＿_／bug>>>bug>>bug>bug
￣￣￣￣￣￣