zoukankan      html  css  js  c++  java
  • 84.手写一个类的继承

    继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式

    es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则是先创建父类的实例对象this调用父类的super(),然后再用子类的构造函数修改this,所以无论是哪种方法必然牵扯到的操作是

    一、 以另一个对象替换当前执行对象的call方法

    复制代码
    Function.prototype.myCall = function() {
              let  obj = Array.from(arguments)[0] || window,
                    arg = Array.from(arguments).slice(1),
                    key = Symbol(),
                result
            obj[key] = this
            result = obj[key](...arg)
            delete obj[key]
            return result
        }
    复制代码

    二、创建实例对象的new方法

    复制代码
    function myNew(fn, arg) {
            let obj = {},
                fn = Array.from(arguments)[0],
                arg = Array.from(arguments).slice(1) Object.setPrototypeOf(obj, fn.prototype) fn.myCall(obj,...arg) return obj }
    复制代码

    完成这两步前提条件之后我们开始用自己的方法完成js继承

    复制代码
    function Fa(name) {
            this.name = name
        }
    Fa.prototype.set1 = function() {
            return [...this.name]
        }
    
    function Sa(name, age) {
            Fa.myCall(this,name)
            this.name = name;
            this.age = age
        }
    Sa.prototype.set2 = function() {
            return [...this.age]
        }
    Sa.prototype = myNew(Fa)
    
    Sa.prototype.constructor = Sa
    
    var qq = myNew(Sa, 123, 456)             
    qq.set1()         //  [1,2,3]
    复制代码

    因为es6中class的继承方式必须用new关键字来调用,所有在此不做过多描述,代码如下

    复制代码
    class Fa {
        constructor(name) {
            this.name = name
                }
        set() {
            return [...this.name]
                        }
            }
    class Sa extends Fa {
        constructor(name, age) {
            super(name)
            this.age = age
                    }
        }
    var dd = new Sa(123, 456)
    
    dd.set()                //[1,2,3]
  • 相关阅读:
    ExtJS学习之路第一步:对比jQuery,认识ExtJS
    创建Windows服务(C++)
    吴恩达2014机器学习教程笔记目录
    在Hexo中渲染MathJax数学公式
    Linux服务器性能检测命令集锦
    Redis开启AOF导致的删库事件
    从表扩展增加列属性说起
    数据库规约解读
    MySQL规约(阿里巴巴)
    HDFS运行原理
  • 原文地址:https://www.cnblogs.com/dream111/p/13485421.html
Copyright © 2011-2022 走看看