一. 创建对象的几种方式

1. 字面量的方式

    var per1={
      name:"卡卡西",
      age:20,
      sex:"男",
      eat:function () {
        console.log("吃臭豆腐");
      },
      readBook:function () {
        console.log("亲热天堂");
      }
    };

2. 调用系统的构造函数

    // 调用系统的构造函数
    let per2= new Object();
    per2.name="大蛇丸";
    per2.age=30;
    per2.sex="男";
    per2.eat=function () {
      console.log("吃榴莲");
    };
    per2.play=function () {
      console.log("这个小蛇真好玩");
    };
    console.log(per2 instanceof Object);

3. 自定义构造函数方式

    // 自定义构造函数
    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
      this.play=function () {
        console.log("天天打游戏");
      };
    }
    let per=new Person("雏田",18,"女");
    console.log(per instanceof Person);

4. 工厂模式创建对象

    function createObject(name,age) {
      let obj=new Object();
      obj.name=name;
      obj.age=age;
      obj.sayHi=function () {
        console.log("您好");
      };
      return obj;
    }

5.Object.create() 创建对象

创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。 它接收两个参数，不过第二个可选参数是属性描述符（不常用，默认是undefined）。

let anotherObject = {
    name: 'ywy'
};
let myObject = Object.create(anotherObject, {
    age: {
        value:8
    },
});
// 获得它的原型
Object.getPrototypeOf(anotherObject) === Object.prototype; // true 说明anotherObject的原型是Object.prototype
Object.getPrototypeOf(myObject); // {name: "若川"} // 说明myObject的原型是{name: "ywy"}
myObject.hasOwnProperty('name'); // false; 说明name是原型上的。
myObject.hasOwnProperty('age'); // true 说明age是自身的
myObject.name; // '若川'
myObject.age; // 18;

原理：

if (typeof Object.create !== "function") {
    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;
        return new F();
    };
}

二. 工厂模式与构造函数之间的区别

    /*
    * 共同点:都是函数,都可以创建对象,都可以传入参数
    *
    * 工厂模式:
    * 函数名是小写
    * 有new,
    * 有返回值
    * new之后的对象是当前的对象
    * 直接调用函数就可以创建对象
    *
    * 自定义构造函数:
    * 函数名是大写(首字母)
    * 没有new
    * 没有返回值
    * this是当前的对象
    * 通过new的方式来创建对象
    *
    *
    * */

三. 构造函数与实例对象原型对象之间的关系。

    /*
    * 构造函数可以实例化对象
    * 构造函数中有一个属性叫prototype,是构造函数的原型对象
    * 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
    * 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
    * 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的
    * */

四. 局部变量与全局变量的转换

1. 局部变量 --> 全局变量

    //页面加载后.这个自调用函数的代码就执行完了
    (function (形参) {
      let num=10;//局部变量
    })(实参);
    console.log(num); // num is not define

2. 全局变量 --> 局部变量

    (function (win) {
      let num=10;//局部变量
      //js是一门动态类型的语言,对象没有属性,点了就有了
      win.num=num;
    })(window);
    console.log(num); // 10;

五. 改变原型的指向

原型指向可以改变 实例对象的原型__proto__指向的是该对象所在的构造函数的原型对象 构造函数的原型对象(prototype)指向如果改变了,实例对象的原型(proto)指向也会发生改变

原型的指向是可以改变的 实例对象和原型对象之间的关系是通过__proto__原型来联系起来的,这个关系就是原型链

    //人的构造函数
    function Person(age) {
      this.age=10;
    }
    //人的原型对象方法
    Person.prototype.eat=function () {
      console.log("人的吃");
    };
    //学生的构造函数
    function Student() {

    }
    Student.prototype.sayHi=function () {
      console.log("嗨,小苏你好帅哦");
    };
    //学生的原型,指向了一个人的实例对象
    Student.prototype=new Person(10);
    var stu=new Student();
    stu.eat();
    stu.sayHi();

六. 原型的最终指向

实例对象中有__proto__原型
构造函数中有prototype原型
prototype是对象
所以,prototype这个对象中也有__proto__,那么指向了哪里
实例对象中的__proto__指向的是构造函数的prototype
所以,prototype这个对象中__proto__指向的应该是某个构造函数的原型prototype

Person的prototype中的__proto__的指向
per实例对象的__proto__------->Person.prototype的__proto__---->Object.prototype的__proto__是null

    function Person() {

    }
    Person.prototype.eat=function () {
      console.log("吃东西");
    };

    var per=new Person();
    console.dir(per);
    console.dir(Person);

七. dom对象的原型指向

divObj.proto---->
HTMLDivElement.prototype的__proto__--->
HTMLElement.prototype的__proto__---->
Element.prototype的__proto__---->
Node.prototype的__proto__---->
EventTarget.prototype的__proto__---->
Object.prototype没有__proto__,所以,Object.prototype中的__proto__是null

  var divObj= document.getElementById("dv");
  console.dir(divObj);

八. 继承的五种方式

1. 原型链继承

子类的原型指向父类的一个实例

function Person (age) {
  this.age = age;
  this.speciality = ['唱', '跳']
}
Person.prototype.eat = function() {
  return '吃饭';
}
function Student() {

}
Student.prototype = new Person(10);
Student.prototype.constructor = Student;
let stu = new Student();
console.log(stu.age); // 10
console.log(stu.eat()); // 吃饭
stu.speciality.push('stu')

let stu1 = new Student();
console.log(stu1.age);    //10
stu1.speciality.push('stu1')
console.log(stu1.speciality)  //  [ '唱', '跳', 'stu', 'stu1' ]

特点：

• 纯粹的继承关系，实例是子类的实例，也是父类的实例

• 父类新增原型方法/原型属性，子类都能访问到

• 简单，易于实现

缺点：

• 子类继承的是父类的一个实例，如果父类的的某个属性是引用类型的将会被子类所共用；

• 子类继承的是父类的一个实例，创建这个实例的时候无法向父类传参；

2. 构造继承

通过call或apply改变函数的this指向，在子类的构造函数中，将父类的方法调用一次，继承父类的共有属性

// 
function Person (age) {
  this.age = age;
  this.speciality = ['唱', '跳']
}
function Doctor(age, professional) {
  Person.call(this,age);
  this.professional = professional;
}
let doc = new Doctor(26, '医生')
console.log(doc)  //Doctor { age: 26, speciality: [ '唱', '跳' ], professional: '医生' }

特点：

• 解决了1中，子类实例共享父类引用属性的问题
• 创建子类实例时，可以向父类传递参数
• 可以实现多继承（call多个父类对象）

缺点：

• 实例并不是父类的实例，只是子类的实例
• 只能继承父类的实例属性和方法，不能继承原型属性/方法
• 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3. 组合继承

利用原型链继承和构造函数继承的各自优势进行组合使用

function Person (age) {
  this.age = age;
  this.speciality = ['唱', '跳']
}
function Teacher (age) {
  Person.call(this,age);
}
Teacher.prototype = new Person();
Teacher.prototype.construct = Teacher;
let tea = new Teacher(12);
tea.speciality.push('tea');
let tea1 = new Teacher(13);
tea1.speciality.push('tea1');
console.log(tea); // Person { age: 12, speciality: [ '唱', '跳', 'tea' ] }
console.log(tea1); // Person { age: 13, speciality: [ '唱', '跳', 'tea1' ] }

特点：

• 弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
• 既是子类的实例，也是父类的实例
• 不存在引用属性共享问题
• 可传参
• 函数可复用

缺点：

• 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

4. 实例 / 原型式继承

不自定义类型的情况下，临时创建一个构造函数，借助已有的对象作为临时构造函数的原型，
然后在此基础实例化对象，并返回。

function observe(name,age) {
  let instance = new Person(age);
  instance.name = name;
  return instance
}
let parent = {
  name:'张三'
};
let son1 = observe(parent);
let son2 = observe(parent);
console.log(son1.name); //张三
console.log(son2.name); //张三

优点

• 不限制调用方式

• 简单，易实现 缺点

• 不能多次继承

5. 寄生继承

为父类实例添加新特性，作为子类实例返回

function observe(func){
  function F() {};
  F.prototype = func;
  let clone = new F();
  clone.say = function () {
    console.log("say")
  } 
  return clone;
}
let parent = {
  name:'张三'
};
let son1 = observe(parent);
let son2 = observe(parent);
console.log(son1.name); //张三
console.log(son2.name); //张三

缺点：

• 实例是父类的实例，不是子类的实例
• 不支持多继承

6. 寄生组合继承

function JiSheng(son,parent) {
    let clone = Object.create(parent.prototype);//创建对象
    son.prototype = clone;      //指定对象
    clone.constructor = son;     //增强对象
}
function Parent(name){
    this.name = name;
    this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
    console.log(this.name);
}
function Son(name){
    Parent.call(this,name);
}
JiSheng(Son,Parent);
son1 = new Son('张三');
son2 = new Son('李四');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//张三
son2.Say();//李四

特点

• 通过寄生的方式来修复组合式继承的不足，完美的实现继承

7. class继承

class People{
  constructor(name='wang',age='27'){
    this.name = name;
    this.age = age;
  }
  eat(){
    console.log(`${this.name} ${this.age} eat food`)
  }
}
//继承父类
class Woman extends People{
  constructor(name = 'ren',age = '26'){
    //继承父类属性
    super(name, age);
  }
}
let womanObj=new Woman('ywy');
womanObj.eat();

8. ES5继承和ES6继承的区别.

es5继承首先是在子类中创建自己的this指向，最后将方法添加到this中.

Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this).

es6继承是使用关键字先创建父类的实例对象this，最后在子类class中修改this.