JavaScript的继承以及原型链相关内容

1. 继承，原型，原型链理解以及它们之间的关系

//创建一个构造函数
function Fn() {
    this.a = 1;
    this.b = 2;
}

//使用该构造函数创建实例f1和f2
let f1 = new Fn();
let f2 = new Fn();

console.log(f1, f2, f1 === f2);

//new的过程中发生的事情
//1.创建一个空对象，作为构造函数创建的实例对象
//2.将这个空对象的__proto__指向构造函数的原型对象prototype
//3.将这个空对象复制给构造函数内部的关键字，this
//4.执行构造函数代码 通过this 为创建的空对象添加属性

console.log(
    f1,
    f2,
    f1.__proto__,
    f2.__proto__,
    Fn.prototype,
    f1.__proto__ === Fn.prototype,
    f2.__proto__ === Fn.prototype,
    f1.__proto__ === f2.__proto__
);

/*每个由构造函数创建出来的实例对象的原型__proto__都指向了它的构造函数的原型对像prototype,而每个
构造函数也都有自己的原型__proto__,它又指向了该构造函数的上层的原型对像prototype,这样可以一致追
溯到Object的最顶层null为止*/
/*
当我们访问构造函数所创建的某个实例的属性时，如果我们访问的这个属性是实例的自身属性时，可以访问到并且返回其属性值，
如果访问的该属性不是实例对象的自身属性，那么就会沿着该实例对象的__proto__逐级向上层的原型对象prototype中去查找，如果在这个
过程中能查找到，就能返回其属性值，如果查到最顶层，也没有查到，那么返回undefined。

我们将构造函数中这种链状形式形成的继承关系称之为原型继承，这种链状形式称之为原型链，通过一下打印(f1.1,f1.__proto__.a)我们可知，
在沿着链状关系向上寻找属性的时候，优先级是逐级降低的(比如在这里的实例f1中的a属性优先级大于通过原型链找到的存在于其构造函数的原型prototype中的a属性,也因此没有被覆盖)。
*/
Fn.prototype.a = 3;
Fn.prototype.b = 4;
Fn.prototype.c = 5;
console.log(f1.a, f1.__proto__.a, f1.c, f1.d, f1.__proto__.d);

//创建一个构造函数 Tn
let Tn = function() {
    this.a = 100;
    return 1000;
};
//创建一个实例t1
let t1 = new Tn();
console.log(t1);

let Tt = function() {
    this.a = 200;
    return {
        b: 300
    };
};
//创建一个实例Tt1
let Tt1 = new Tt();
console.log(Tt1);
/*
如果构造函数内部有return语句，且return的是一个对象，那么通过new命令，返回的是该return语句指定的对象,如果return语句返回的不是对象，那么该return语句会被忽略，直接返回构造函数的实例对象this
*/

2. 使用不同的方法来创建对象和生成原型链

//创建一个对象
let objOne = {
    a: 1,
    m: function() {
        console.log(this);
        return this.a + 3;
    }
};
//使用Object.create创建一个新对象继承自objOne
let objTwo = Object.create(objOne);
console.log(objOne, objTwo.a, objTwo.m());
//创建objTwo自身的属性
objTwo.a = 100;
console.log(objTwo.m());
/*
使用Object.create()来来创建一个新对象使其继承于一个现存对象，现存对象为当前创建新对象提供__proto__
当在创建的该新对象调用继承的方法的时候，方法内部的this，指向当前创建的继承对象，而非继承的函数所在的原型对象
*/

//创建对象的方法
//1 使用语法结构直接创建
let A = {
    value: 'a'
};
let B = [ 1, 2 ];

//2 通过构造器来创建
function MakeObj() {
    this.a = 200;
}
let C = new MakeObj();
console.log(C, C.a);

//3 通过Object.create来创建
let Dobject = {
    a: 15
};
let Fobject = Object.create(Dobject);
console.log(Fobject, Fobject.a);

//4 通过class创建
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
class Chinese extends Person {
    constructor(name, age, sex) {
        super(name, age);
        this.sex = sex;
    }
    say() {
        console.log('chinese');
    }
}

const oneChinese = new Chinese('老王', 50, '男');
console.log(oneChinese);
oneChinese.say();

//查看某个对象本身的属性中是否具有某个属性，而不是从原型链中去查看是否具有某个属性可以使用hasOwnProperty
let newObj = {
    height: 200,
    width: 100
};
let newObj_one = Object.create(newObj);
newObj_one.length = 300;
console.log(newObj_one.hasOwnProperty('height'), newObj_one.height);
console.log(newObj_one.hasOwnProperty('length'));

let Car = function() {
    this.name = 'car';
};
Car.prototype.energy = 'gas';

let myCar = new Car();
myCar.height = 200;
console.log(myCar.hasOwnProperty('name'));
console.log(myCar.hasOwnProperty('height'));
console.log(myCar.hasOwnProperty('energy'), myCar.energy);