• js篇-原型与原型链


    prototype属性

    每一个构造函数都有一个prototype属性,这个就是原型,每一个对象都会从原型"继承"属性。

    __proto__属性

    每一个实例都有一个__proto__属性,这个属性指向原型

    继承

    原型链继承

     实现思路:定义两个构造函数,分别为父类(SuperType)、子类(SubType),为了实现子类能够使用父类的属性(本身和原型上面的属性)。重写子类的原型,让子类的原型指向父类实例,这样子类的构造函数就是父类的实例地址,实现子类可以使用父类的本身和原型上的属性

    function superType () {
    }
    superType.prototype.say = function () {
      console.log('say hello')
    }
    function subType(age) {
      this.age = age
    }
    subType.prototype = new superType(); // 改写子类的原型,为夫类的实例
    SubType.prototype.constrcutor = SubType;  

    优点:子类可以通过原型链的查找,实现父类的属性公用与子类的实例

    缺点:

    • 一些引用数据操作的时候会出问题,两个实例会公用继承实例的引用数据类
    • 谨慎定义方法,以免定义方法也继承对象原型的方法重名
    • 无法直接给父级构造函数使用参数

    构造函数继承

    实现思路:使用call apply方法,通过执行方法修改tihs (上下文),是的父级的this变成子类实例的this,这样每个实例都会得到父类的属性,实现引用属性备份

    function superType (name) {
      this.name = name;
    }
    superType.prototype.say = function () {
      console.log('say hello')
    }
    function subType (age, name) {
      this.age = age;
      superType.call(this, name)
    }

    优点:解决了父类传递参数问题

    缺点:子类的实例只是得到了父类的this绑定的属性,放在父类prototype的属性和方法不可使用

    组合继承(原型链+构造函数继承)

    实现思路:

    • 使用原型链的继承实现,通过原型查找功能来满足原型链共享方法
    • 使用借用构造函数方法,使用实例备份父类共享引用类型备份
    function superType (name) {
      this.name = name;
    }
    superType.prototype.say = function () {
      console.log('say hello')
    }
    function subType (age, name) {
      this.age = age;
      superType.call(this, name)
    }
    subType.prototype = new superType(); // 改写子类的原型,为夫类的实例
    SubType.prototype.constrcutor = SubType;

    缺点:父类的构造函数被实例换了两次 * 实例会有父类的构造函数的一些this属性、子类的构造函数(prototype)上也有一份实例的上有的属性

    function superType (name) {
      this.name = name;
    }
    superType.prototype.say = function () {
      console.log('say hello')
    }
    function subType (age, name) {
      this.age = age;
      superType.call(this, name)
    }
    const props = Object(superType.prototype)
    props.constrcutor = subType
    subType.prototype = props
    // subType.prototype = new superType(); // 改写子类的原型,为夫类的实例
    

      

  • 相关阅读:
    如何在dede栏目设置中添加自定义字段(dede二次开发-纯抄贴)
    dedecms内容页 上下篇 添加文章描述方法
    关于透明层----背景透明字不透明的效果
    什么是JavaScript闭包终极全解之一——基础概念
    phpcms v9中调用多栏目的方法--get标签(备实例)
    PHP识别电脑还是手机访问网站
    PHP中 post 与get的区别 详细说明
    js 处理数据里面的空格
    mysql中的unix_timestamp函数
    PHP中date函数月和日带0问题
  • 原文地址:https://www.cnblogs.com/liangshuang/p/12299495.html
Copyright © 2020-2023  润新知