js 对象 原型 继承

对象

// 第一种方式：字面量
var o1 = {name: 'o1'};
var o2 = new Object({name: 'o2'});

// 第二种方式：Object.create
var p = {name: 'p'};
var o4 = Object.create(p);
console.log(o4.__proto__ === p);

// 第三种方式 构造函数
var M = function (name) { this.name = name; };
var o3 = new M('o3');

M.prototype.say = function () {
  console.log('say hi');
};
var o5 = new M('o5');

实现new

1. 创建一个新对象；
2. 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
3. 执行构造函数中的代码（为这个新对象添加属性）；
4. 返回新对象
   参考: https://zhuanlan.zhihu.com/p/84605717

function myNew() {
  var func = Array.prototype.shift.call(arguments);
  var obj = Object.create(func.prototype);
  var result = func.apply(obj, arguments);
  return result instanceof Object ? result : obj;
}

实现instanceof

function myInstanceOf(obj, func) {
  // 获取函数的原型对象
  const FO = func.prototype;
  // 获取所传进来对象的原型对象
  const Obj = obj.__proto__;
  while (true) {
    if (Obj === null) {
      return false;
    }
    if (Obj === FO) {
      return true;
    }
    Obj = Obj.__proto__;
  }
}

实现call apply

apply方法传入两个参数，第一个参数就是this的指向，第二个参数就是函数参数组成的数组；而call传入多个参数，第一个参数也是this的指向，之后的参数都是函数的参数。等等，还有，在ES6解构赋值之前，可以用apply给函数传入参数数组
bind 除了返回是函数以外，它 的参数和 call 一样
参考: https://zhuanlan.zhihu.com/p/83523272

Function.prototype.myOwnCall = function(context) {
  context = context || window;
  var uniqueID = "00" + Math.random();
  while (context.hasOwnProperty(uniqueID)) {
    uniqueID = "00" + Math.random();
  }
  context[uniqueID] = this;

  var args = [];
  for (var i = 1; i < arguments.length; i++) {  
    args.push("arguments[" + i + "]");
  }
  var result = eval("context[uniqueID](" + args + ")");
  delete context[uniqueID];
  return result;
}

// 检测
var person = {
  fullName: function(txt) {
     console.log(txt + this.firstName + " " + this.lastName);
   }
 }
var person1 = {
   firstName:"John",
   lastName: "Doe"
} 
person.fullName.myOwnCall(person1, "Hello, ");  // 输出"Hello, John Doe"

Function.prototype.myOwnApply = function(context, arr) {
  context = context || window
  var uniqueID = "00" + Math.random();
  while (context.hasOwnProperty(uniqueID)) {
    uniqueID = "00" + Math.random();
  }
  context[uniqueID] = this;

  var args = [];
  var result = null;
 
  if (!arr) {
    result = context[uniqueID]();
  } else {
    for (var i = 0; i < arr.length; i++) { 
      args.push("arr[" + i + "]");
    }
    result = eval("context[uniqueID](" + args + ")");
  }
  delete context[uniqueID];
  return result;

}

bind

https://zhuanlan.zhihu.com/p/85438296

原型

原型关系

继承

      /**
       * 借助构造函数实现继承
       */
      function Parent1() {
        this.name = "parent1";
      }
      Parent1.prototype.say = function () {};
      function Child1() {
        Parent1.call(this);
        this.type = "child1";
      }
      console.log(new Child1());

      // 获取不到父原型对象上的 say()方法
      // console.log(new Child1().say());

      /**
       * 借助原型链实现继承
       */
      function Parent2() {
        this.name = "parent2";
        this.play = [1, 2, 3];
      }
      function Child2() {
        this.type = "child2";
      }
      Child2.prototype = new Parent2();

      var s1 = new Child2();
      var s2 = new Child2();
      console.log(s1.play, s2.play);
      s1.play.push(4);

      // new出来的两个实例其父构造器下的属性值 会同步
      // [1, 2, 3, 4]   [1, 2, 3, 4]
      console.log(s1.play, s2.play);

      /**
       * 组合方式
       */
      function Parent3() {
        console.log("function Parent3...");
        this.name = "parent3";
        this.play = [1, 2, 3];
      }
      function Child3() {
        Parent3.call(this);
        this.type = "child3";
      }
      Child3.prototype = new Parent3();
      var s3 = new Child3();

      // Parent3.call(this) 和  new Parent3()  父级构造函数 会执行了两次

      /**
       * 组合继承的优化1
       */
      function Parent4() {
        this.name = "parent4";
        this.play = [1, 2, 3];
      }
      function Child4() {
        Parent4.call(this);
        this.type = "child4";
      }
      Child4.prototype = Parent4.prototype;
      var s5 = new Child4();

      console.log(s5 instanceof Child4, s5 instanceof Parent4);
      console.log(s5.constructor); // Parent4
      //  实例对象s5 = new Child4()的构造器 constructor 应该为 Child4

      /**
       * 组合继承的优化2
       */
      function Parent5() {
        this.name = "parent5";
        this.play = [1, 2, 3];
      }
      function Child5() {
        Parent5.call(this);
        this.type = "child5";
      }
      //   Object.create(obj)方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__
      let obj = Object.create(Parent5.prototype);
      Child5.prototype = obj;
      Child5.prototype.constructor = Child5;
      console.log( "一条原型链 ",
        Child5.prototype.__proto__ === obj.__proto__,
        obj.__proto__ === Parent5.prototype
      );

      var s7 = new Child5();
      console.log("即是子类也是父类的实例",s7 instanceof Child5, s7 instanceof Parent5);
      console.log(s7.constructor);

es6 class 继承

      class person {
        constructor() {
          this.kind = "person";
        }
        eat(food) {
          console.log(this.name + " eat " + food);
        }
      }
      class student extends person {
        constructor(name) {
          super();
          this.name = name;
        }
      }
      var Tom = new student("Tom");
      var Jock = new student("Jock");
      console.log(Tom.kind); //person
      console.log(Jock.kind); //person
      Tom.eat("apple"); //Tom apple
      Jock.eat("orange"); //Tom orange