JS 实现继承的方法 ES6 and ES5
时间:2019-10-09
本文章向大家介绍JS 实现继承的方法 ES6 and ES5,主要包括JS 实现继承的方法 ES6 and ES5使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
继承
ES6中有一个属性的 extends
语法:
• class Father {}
• class Son extends Father{}
注意:是子类继承父类
super关键字
我们应用的过程中会遇到父类子类都有的属性,此时,没必要再写一次,可以直接调用父类的方法就可以了
super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数
当子类没有constructor的时候可以随意用父类的,但是如果子类也含有的话,constructor会返回实例,this的指向不同,不可以再直接使用父类的东西
调用父类构造函数
class F { constructor(name, age) {} } class S extends F { constructor(name, age) { super(name, age); } } //注意: 子类在构造函数中使用super, 必须放到this 前面(必须先调用父类的构造方法,在使用子类构造方法
调用父类普通函数
class F { constructor(name, age) {} say() {} } class S extends F { constructor(name, age) { super(name, age); } say() { super.say() } } //注意:如果子类也有相同的方法,优先指向子类,就近原则
总结:super调用父类的属性和方法,那么查找属性和方法的原则就近原则
如果子类不写东西,那么直接继承父类就可以用
但是如果子类有自己的构造函数和父类同名的方法,此时不可以直接用父类的东西,需要用super调用父类的方法和构造函数
附案例
class Father { constructor(uname, age) { this.uname = uname; this.age = age; } qian() { console.log('赚他一个亿'); } } // 子类 class Son extends Father { constructor(uname, age, score) { // super:可以调用父类的构造函数和方法 super(uname, age); this.score = score; } say() { console.log('哇哈哈'); } qian() { super.qian(); console.log('zt两毛钱'); } } var obj = new Son('张三', 22, 99); console.log(obj); // obj.qian(); obj.qian();
-
ES5 继承 又称为组合继承
ES6之前并没有给我们提供extends 继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。
call() 方法 继承属性
调用这个函数, 并且修改函数运行时的this 指向
这个方法里面有参数 第一个参数是谁继承 就写谁 后面跟着属性
function Father (uname, age) { this.uname = uname; this.age = age; } Father.prototype.say = function () { console.log('唱歌'); } // 属性,方法 function Son (uname, age, score) { // this 指的是调用者 Father.call(this, uname, age); this.score = score; } var obj = new Son('张三', 22, 99); console.log(obj);
继承方法
就是把父亲的原型对象 赋给子类的实例对象;
function Father () { } Father.prototype.say = function () { console.log('new哇哈哈'); } function Son () {} // 继承方法 // Son.prototype = Father.prototype; // 把父类的实例对象赋值给子类的原型,让子类的原型对象指回构造函数 Son.prototype = new Father(); Son.prototype.constructor = Son var obj = new Son(); obj.say();
注意 一定要让子类指回构造函数 因为在赋值的时候 会把子类给覆盖掉
Son.prototype = new Father(); Son.prototype.constructor = Son;
总结 用构造函数继承属性 用原型对象继承方法
原文地址:https://www.cnblogs.com/lwa1999/p/11643029.html
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(14)-EasyUI缺陷修复与扩展
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(10)-系统菜单栏[附源码]
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(5)-EF增删改查
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(15)-权限管理系统准备
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(11)-系统日志和异常的处理①
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查
- No.3 啥是数据运营(三):思维方式
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(7)-MVC与EasyUI DataGrid
- MySQL数据同步【双主热备】
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(6)-Unity 依赖注入
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(4)-创建项目解决方案
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(3)-漂亮系统登陆界面
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(2)-easyui构建前端页面框架[附源码]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法