继承之es5对比es6
es5 写法:
function Person(name){
this.name = name;
}
Person.prototype.sayName = function() {
alert(this.name);
}
function VipPerson(name,level){
Person.call(this,name);
this.level = level;
}
// 组合继承(缺点是prototype这一层多了一些无用的undefined属性)
// VipPerson.prototype = new Person();
// VipPerson.prototype.constructor = VipPerson; //重写construtor
// 寄生组合继承
VipPerson.prototype = Object.create(Person.prototype, {
constructor: { //重写construtor
value: VipPerson,
enumerable: false,
configurable: true,
writable: true
}
})
var vipPerson = new VipPerson('amie',3);
es6的写法:
相比于es5,es6的写法简化了很多,extends、super就可以完成上面寄生组合继承的效果
super,可以看成 Person.call(this, name)。
class Person{
constructor(name){
this.name = name;
}
sayName(){
alert(this.name);
}
}
class VipPerson extends Person{
constructor(name,level){
super(name);
this.level = level;
}
}
var person2 = new VipPerson('rick',3)
继承之es5对比es6的更多相关文章
- js类的继承,es5和es6的方法
存在的差异:1. 私有数据继承差异 es5:执行父级构造函数并且将this指向子级 es6:在构造函数内部执行super方法,系统会自动执行父级,并将this指向子级2. 共有数据(原型链方法)继承的 ...
- 多角度对比 ES5与ES6的区别
ES5与ES6的对比不同点整理 本文关键词:ES6,javascript, 1.Default Parameters(默认参数) es6之前,定义默认参数的方法是在一个方法内部定义 var link ...
- ES5与ES6对比
ES5与ES6对比 1. 模块引用 1.在ES5里,引入React包基本通过require进行,代码类似这样: // ES5 var React = require('react'); var { C ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- 详解ES5和ES6的继承
ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一 ...
- ES5与ES6中的继承
ES5继承在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种: 父类: function Father (name) { this.name = name || 'sam' ...
- es5与es6继承思考
es5与es6继承思考 es6继承 class Father{ constructor(name){ this.name = name; } getName(){ console.log(this.n ...
- ES5和ES6中的继承
看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: function Super( ...
随机推荐
- [BUAA-SE-2018]结对作业测试报告
目录 1. 测试方式 2. 评分规则 2.1 测试点组成 2.2 性能测试的分级 2.3 重新提交的扣分策略 3. 评测结果 3.1 罗老师班 3.2 任老师班 3.3 表中数据的说明 4. 测试点下 ...
- Linux内核读书笔记第六周
主要内容: 什么是调度 调度实现原理 Linux上调度实现的方法 调度相关的系统调用 什么是调度 现在的操作系统都是多任务的,为了能让更多的任务能同时在系统上更好的运行,需要一个管理程序来管理计算机上 ...
- 男神女神配——alpha阶段总结
一.需求分析 虽然公共社交网络系统能够满足大多数高校校园用户在校园网络社交的需求,但是针对校园学习.工作和文化生活等方面的支持以及学校个性化需求方面却存在不足.利用电子校务平台的数据,设计了与真实校园 ...
- 剑指offer:变态跳台阶
题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 思路 首先想到的解决方案是根据普通跳台阶题目改编,因为可以跳任意级,所以要 ...
- PAT 1033 旧键盘打字
https://pintia.cn/problem-sets/994805260223102976/problems/994805288530460672 旧键盘上坏了几个键,于是在敲一段文字的时候, ...
- 自定义组件的 v-model
Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Bool ...
- FICO基础知识(三)
成本中心: 成本中心是企业内的最小职责单位,是每一笔费用的具体接收者.创建成本中心主数据时必须将每个成本中心分配给标准层次结构的某个节点,标准层次结构反映了成本中心与成本中心.成本中心与成本中心组.成 ...
- angular4 组件通讯、生命周期
主要通讯形式 父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件 父组件通过局部变量获取子组件的引用 父组件使用@ViewChild获取子组件的引用 两个不相关联的组件使用中间人模式交互 终极 ...
- python 从filelist.txt中拷贝文件到另一文件夹中
#! python #coding:utf-8 ##!/usr/bin/python # Filename : fileCp.py import sys import os import shutil ...
- codeforces624A
Save Luke CodeForces - 624A Luke Skywalker got locked up in a rubbish shredder between two presses. ...