zoukankan      html  css  js  c++  java
  • 继承

    和传统的OOP语言来说,JavaScript语言比较蛋疼的是它没有类这个机制。所以说我们事先js的继承就从对象角度下手了。我们重点说一下依据原型链继承的。(其他的继承我就不说了,比如借用父对象的构造函数等,实用性不强)1.上面所说的实现原型链的方法虽然有点继承的味道了,但是你有没有发现 实例化xiaoming这个对象的时候调用了Man这个构造函数,但是xiaoming自己的age和name都没能进行构造,只不过是原型上的属性而已(其实是Person自己构造的,new Person( 23, "xiaoming" ))。我们其实可以这样用call和apply这个object原型下面给我们定义好的方法改进下(call和apply方法自己看api说明吧)

    function Man(x, y) {
    Person.call(this, x, y); //这里你可以这样理解,this指的是Man,这样其实就是借用Person构造函数this.beard = "xxx";
    }

    我们把Man的构造函数这样一改,实例化的时候传参,这样age和name这两个属性就是Man自己构造出来的了,并不会被共享

    Man.prototype = new Person( );
    Man.prototype.constructor = Man;var xiaoming = new Man(23, "xiaoming");

    这里只是让Man的原型的构造函数变成原有的构造函数,如果不加这一句的话,那么Man原型的构造函数就变成undefied,因为实例和构造函数并没有直接关系。这样一来,原型找不到构造函数,这是非常蛋疼的事情,违反了原型链的定义啊。
    这边可能会有人问了,我为什么不自己像胡子beard 那个属性一样直接构造呢。
    大哥,我这是举例子,你以为实际的项目中就会有这么两个属性吗。而且这样不正是继承的目的吗
    可以少写很多代码啊。(说多了都是泪)
    但是也是有缺点的:两次调用父类构造函数(第一次是在创建子类原型的时候,第二次是在子类构造函数内部);子类继承父类的属性,一组在子类实例上,一组在子类原型上(在子类原型上创建不必要的多余的属性,实例上的屏蔽原型上的同名属性,是不是感觉有点多余了 ,效率低。

    2.为了改进这种方法,下面说的这种继承方式是借助我们伟大的道爷(这个人很厉害,自行百度)的灵感 。这种就是利用一个空函数对象来做一个桥梁.具体实现方式如下:

    function inherits(Child, Parent) {    var F = function () {};
        F.prototype = Parent.prototype;
        Child.prototype = new F();
        Child.prototype.constructor = Child;
    }

    另外在子对象的构造函数中别忘了借用父对象的构造函数哦。(就是那个call或者apply方法)

    这里和上面的区别是,子对象的原型现在不是父对象的实例了,变成了空函数对象的实例(父对象不用再创建两次了,并且子对象的原型上也不会有啥属性和方法了)。而空函数对象的原型变成了父对象的原型。前面我们说过,有了实例就能找到原型。所以现在子对象原型和父对象原型是就建立关系了。这种方式现在是最稳的方法,也已经被很多框架给写到源码里面了。这里我们就用google closure 关于继承的两个api,这边简单举个例子:

    Child = function( ){
    goog.base(this);this.height = 12;
    }
    goog.inherits(Child, Parent);

    这里就实现了我们上述实现的,不过封装起来了而已。

  • 相关阅读:
    element-ui的气泡确认框
    ES6 检测数组中是否存在满足某些条件的元素实现方式
    P6788 「EZEC-3」四月樱花
    Codeforces Global Round 10(CF1392)
    Ynoi2019模拟赛
    谷粒学院项目分享(源码+资料+课件)全部齐全
    安装最新版NUXT
    LibreOJ #6284
    LibreOJ #6283
    LibreOJ #6282
  • 原文地址:https://www.cnblogs.com/Logo-TPM/p/6187863.html
Copyright © 2011-2022 走看看