ES6学习(8)原生继承

简介: ES6学习(8)原生继承

在es5中要实现继承,需要两个关键步骤:
①去继承构造函数中的成员,
②去继承原型对象上的成员。
对于去继承构造函数中的成员,我们可以借助apply或call方法,唯一的区别就是参数的不同,一个是数组,一个是单个传入。

1.父类(我们把方法定义在父类上,
这会造成,每次new实例的时候就会创建一个run方法,
放到原型对象上,就会去原型对象上找)
  function Animal(name, age){
   
     this.age = age;
     this.name = name;
     this.run = function () {
   
         console.log('run');
     }
  }
  2.创建一个Dog子类
  function Dog(name, age){
   
     Animal.call(this, name, age);
  }
3. 缺点:每次new一个dog实例,都需要调用Animal,效率下降

去继承原型对象中的方法

关键代码:Dog.prototype = Animal.prototype
通过这行代码我们可以去实现原型对象上的继承,
但是有一个缺点,就是无法实现个性化的继承。
也就是说如果我们往Dog.prototype上加一个成员,那么Animal的prototype上也会存在。
  1. 如果我们还是想实现Dog.prototype上添加而Animal上面不增加,应该如何做呢?
    需要借助一个中间夹层
    function F(){
         }
    F.prototype = Animal.prototype;
    Dog.prototype = new F();
    1:创建了一个新的构造函数F,让F的原型对象指向Animal的原型对象,然后让Dog的原型对象等于F的实例对象,因为F的实例对象拥有F.prototype的成员,即用于Ani
    
相关文章
|
11月前
|
JavaScript 前端开发 Android开发
转换 ES6 代码时需要注意哪些兼容性问题
在转换ES6代码时,需关注兼容性问题,如箭头函数、模板字符串、let/const等语法在旧浏览器中的支持情况,以及模块化、类、Promise等特性是否需要polyfill。使用Babel等工具可有效解决大部分兼容性问题。
|
JavaScript 前端开发 API
第二章 搭建TS环境
第二章 搭建TS环境
400 0
|
SQL 关系型数据库 MySQL
JPQL-Query查询实例详解
JPQL-Query查询实例详解
338 0
|
11月前
|
JavaScript
Vue 的响应式原理中 Object.defineProperty 有什么缺陷
Vue 的响应式原理主要依赖于 `Object.defineProperty`,但该方法存在一些缺陷:无法检测到对象属性的添加和删除,且对大量数据进行代理时性能较差。Vue 3 中改用了 Proxy 来解决这些问题。
|
11月前
|
安全
ES5/ES6 的继承除了写法以外还有什么区别
ES5 和 ES6 的继承主要区别在于实现机制和语法糖。ES5 通过原型链和构造函数模拟类的继承,而 ES6 引入了 class 关键字,使继承更加直观和简洁,支持 super 调用父类方法,提升了代码可读性和维护性。
|
JavaScript 前端开发
成功解决:jQuery is not defined
这篇文章介绍了如何解决在使用jQuery时浏览器控制台报错`jQuery is not defined`的问题,通过在webpack配置文件中添加特定的插件配置来确保jQuery被正确加载和使用。
成功解决:jQuery is not defined
电商购物商城项目商品表结构介绍
电商购物商城项目商品表结构介绍
Warning: To load an ES module, set “type“: “module“ in the package.json or use the .mjs extension.
Warning: To load an ES module, set “type“: “module“ in the package.json or use the .mjs extension.
|
存储 Shell Perl
awk从脚本内读取文件内容到变量
awk从脚本内读取文件内容到变量
471 6