原型与原型链与继承

原型、原型链与继承

构造函数

构造函数创建实例的过程

1.创建一个新对象

2.将空对象的__proto__指向构造函数的原型

3.修改构造函数中this指向,将构造函数中的this指向实例对象,执行构造函数中的代码,给这个新对象添加属性和方法(通过call/apply)

4.返回新对象(实例对象)

手写new

  function Person(name, age) {
    this.name = name;
    this.age = age;
  }
  //   const p = new Person("张三", 40);
  //   console.log(p);
  function myNew(Fn, args) {
    let obj = {};
    obj.__proto__ = Fn.prototype;
    Fn.apply(obj, args);
    return obj;
  }
  const p = myNew(Person, ["张三", 40]);
  console.log(p);

原型

原型与原型链都都源于对象并服务于对象,他们是js实现继承的一种模型

原型:每个构造函数都有一个prototype属性,它就是通过构造函数创建(new)的对象的原型,在他上面定义的属性和方法都可以被对象实例所共享

  function Fn(name) {
    this.name = name;
    this.speak = function () {
      console.log("Chinese");
    };
  }
  Fn.saySomething = function () {
    console.log("i love you");
  };
  const fn = new Fn("张三");
  fn.speak();    // Chinese
  fn.saySomething();  // 报错 saySomething is not a function
  // 但是如果我将saySomething放到Fn的prototype中,所有实例都可以使用这个方法
  function Fn(name) {
    this.name = name;
  }
  Fn.prototype.saySomething = function () {
    console.log("i love you");
  };
  const fn = new Fn("张三");
  const fn2 = new Fn("李四");
  fn.saySomething();  // i love you
  fn2.saySomething();  // i love you

protype对象

1>proto属性

js中,除去null外任何对象内部都会自带__proto__属性;prototype是一个对象,所以存在__proto__属性

fn.__proto__==>Fn.prototype

2>constructor属性

对象的的prototype里面有个constructor属性,指向当前对象所属的构造函数

Fn.prototype.constructor==>Fn构造函数

每个构造函数都有一个prototype属性,指向原型对象,原型对象上有个constructor属性指回构造函数,每个实例对象都有一个__proto__属性,指向构造函数的prototype

原型链

原型链:每个对象都有一个__proto__属性,指向他的原型,也就是构造函数的prototype;当访问一个对象的属性时,它首先会在自己身上找,如果没有找到就会往原型上面找,如果还是没找到,他会继续往上,直到找到为止,如果查找到最顶层的原型对象中也没有找到,就结束查找,返回undefined,这样就会形成一条链,就是原型链

原型链的终点是null,Object.prototype .__proto__指向null

继承

继承的本质是重写原型对象

原型链继承

可以继承属性和方法

      function Boy() {
        this.gender = "male";
      }
      function Girl() {
        this.gender = "female";
        this.color = "pink";
      }
      Girl.prototype.getColor = function () {
        return this.gender;
      };
      Girl.prototype.getGender = function () {
        return this.gender;
      };
      // 创建Girl实例,并加那个该实例赋值给Boy原型
      Boy.prototype = new Girl();
      const baby = new Boy();
      console.log(baby.getColor()); // pink
      console.log(baby.getGender()); // male

缺点:

  1. 多个实例对引用类型的操作会被篡改

  2. 在创建子类型是不能向超类型的构造函数中传参

       function Boy() {
         this.colors = ["blue", "green"];
       }
       function Girl() {}
       Girl.prototype = new Boy();
       const baby1 = new Girl();
       baby1.colors.push("black");
       console.log(baby1.colors); //["blue", "green","black"]
       // baby2和baby1的构造函数一样,都到原型上找,指向一致,color是引用类型,所以baby2也跟着变了
       const baby2 = new Girl();
       console.log(baby2.colors); //["blue", "green","black"]
    

构造函数继承

通过call()、apply()来实现继承

call

apply

缺点:只能继承父类的实例属性和方法,无法继承原型属性、方法

      function Boy() {
        this.gender = "male";
        // 继承Boy
        Girl.call(this);
      }
      function Girl() {
        this.gender = "female";
        this.color = "pink";
      }
      Girl.prototype.getGender = function () {
        return this.gender;
      };
      const baby = new Boy();
      console.log(baby); // {gender:"female",color:"pink"}
      console.log(baby.getGender()); //报错: baby.getGender is not a function

组合继承

使用原型链实现原型属性和方法的继承,通过构造函数实现对实例属性的及继承

      function Boy(name) {
        this.name = name;
        this.colors = ["blue"];
      }
      Boy.prototype.getName = function () {
        return this.name;
      };
      function Girl(name, age) {
        // 先利用构造函数继承来继承实例对象的属性和方法
        Boy.call(this, name);
        this.age = age;
      }
      // 在利用原型继承来继承原型
      Girl.prototype = new Boy();
      const baby1 = new Girl("baby1", 0);
      const baby2 = new Girl("baby2", 1);
      console.log(baby1);
      console.log(baby1.getName()); // baby1
      console.log(baby2.getName()); // baby2
      baby1.colors.push("pink");
      // 实例自身已经有colors属性,就不会到原型上找,所以不会相互影响
      console.log(baby1.colors); // ['blue','pink']
      console.log(baby2.colors); // ['blue'] 

组合继承融合了两者的有点,避免了他们的缺陷

原型式继承

object()对传入其中的对象执行了一次浅复制,将构造函数F的原型直接指向传入的对象

      function object(obj) {
        function F() {}
        F.prototype = obj;
        return new F();
      }
      const person = {
        name: "test",
        colors: ["blue"],
      };
      const p = object(person);
      p.name = "hello";
      p.colors.push("pink");
      console.log(p.colors); // ["blue","pink"]
      const p2 = object(person);
      p2.name = "world";
      p2.colors.push("white");
      console.log(p2.colors); // ["blue","pink",'white']
      console.log(p.colors); // ["blue","pink",'white']

缺点:

  1. 多个实例对引用类型的操作会被篡改
  2. 在创建子类型是不能向超类型的构造函数中传参

寄生式继承

在原型的基础上,增强对象,返回构造函数

      function object(obj) {
        function F() {}
        F.prototype = obj;
        return new F();
      }
      function objectAnother(origin) {
        const clone = object(origin);
        clone.greet = function () {
          alert("hello");
        };
        return clone;
      }

      const person = {
        name: "test",
        colors: ["blue"],
      };
      const p = objectAnother(person);
      p.colors.push("pink");
      p.greet();
      console.log(p.colors); // ['blue',pink]
      const p2 = objectAnother(person);
      p2.colors.push("white");
      console.log(p2.colors); // ["blue","pink",'white']
      console.log(p.colors); // ["blue","pink",'white']

寄生组合式继承

function inheritPrototype(subType, superType){
  const prototype = Object.create(superType.prototype);  // 创建对象,创建父类原型的一个副本
  prototype.constructor = subType;  // 增强对象,弥补因重写原型而失去的默认的constructor 属性
  subType.prototype = prototype;  // 指定对象,将新创建的对象赋值给子类的原型
}

// 父类初始化实例属性和原型属性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 借用构造函数传递增强子类实例属性(支持传参和避免篡改)
function SubType(name, age){
  SuperType.call(this, name);
  this.age = age;
}

// 将父类原型指向子类
inheritPrototype(SubType, SuperType);

// 新增子类原型属性
SubType.prototype.sayAge = function(){
  alert(this.age);
}

const instance1 = new SubType("xyc", 23);
const instance2 = new SubType("lxy", 23);

instance1.colors.push("2"); // ["red", "blue", "green", "2"]
instance1.colors.push("3"); // ["red", "blue", "green", "3"]

ES6类继承extends

ES6支持类的继承,它背后依旧是使用原型链

      class Person {
        static myStaticProp = 42; // 静态属性:class本身的属性,不是定义到实例对象(this)上面的属性
        constructor(name, ageNum) {
          this.name = name;
          this.age = ageNum;
        }
        getDoubleAge() {
          return 2 * this.age;
        }
      }
      const p = new Person("潘周聃", 29);
      console.log(p.getDoubleAge()); // 58
      class personalInfo extends Person {
        constructor(name, age, info) {
          super(name, age); // 不能在调用super之前引用this
          this.info = info;
        }
        getInfo() {
          return this.info;
        }
      }
      const p2 = new personalInfo("潘周聃", 29, "硕士毕业于苏黎世联邦理工大学");
      console.log(p2.getDoubleAge()); // 58
      console.log(p2.getInfo()); //"硕士毕业于苏黎世联邦理工大学"

扩展

instanceof

基本语法

返回布尔值

      const arr = [1];
      console.log(arr instanceof Array); // true
      console.log(arr instanceof Object); // true
      console.log(null instanceof Object); // false

原理

右侧的对象(构造函数)的原型对象prototype)是不是在左侧对象的原型链上

手写instanceof

      function myInstLnce(L, R) {
        if (typeof L !== "object" || L === null) return false;
        const origin = R.prototype;
        L = Object.getPrototypeOf(L);
        while (true) {
          if (L === origin) return true;
          L = Object.getPrototypeOf(L);
        }
      }

apply call bind

call、apply、bind的区别

都可以改变this的指向

1》call 和 apply 改变this指向的同时,会调用函数,bind改变函数的this指向,不会调用

2》call 和apply 的传参不同,第一个参数都是this指向的执行上文,后面的参数都是作为改变this指向的函数的参数;call 第二个参数开始,可以接收任意个参数。每个参数会映射到相应位置的 Function 的参数上,apply第二个参数必须是数组或者类数组,它们会被转换成类数组,传入 Function 中,并且会被映射到 Function 对应的参数上

      function fn(uname, age) {
        this.name = uname;
        this.age = age;
      }
      const obj = {
        name: "张三",
        age: 20,
      };
      fn.call(obj, "test", 22);
      console.log(obj);
      fn.apply(obj, ["测试", 33]);
      console.log(obj);

3》在使用上的区别:

call:对象的继承,在子构造函数这种调用父构造函数,但是改变this指向,就可以继承父的属性

function superClass () { 
 this.a = 1; 
 this.print = function () {  
 console.log(this.a);  
}
  }
function subClass () {  
 superClass.call(this);   
 this.print();
}
subClass(); // 1

apply的应用场景: Math.max,获取数组中最大、最小的一项

const max = Math.max.apply(null, array)  // 和Math.max(...array)效果一样

第一个参数,是一个对象。 函数的调用者,将会指向这个对象。如果不传,则默认为全局对象 window

注意点:

多次 bind 时只认第一次 bind 的值

箭头函数中this不会被改变

相关推荐
gqkmiss10 分钟前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255023 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2344 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1234 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~5 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语5 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport5 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap