类的特点

1.类只能通过new得到

在es6中类的使用只能是通过new,如果你将它作为一个函数执行,将会报错。

//es6的写法
class Child {
constructor() {
this.name = 1;
}
}
let child = new Child();
console.log(child.name)//1
//如果直接方法调用的形式,会报错
let child = Child();//Class constructor Child cannot be invoked without 'new'

es5中的class其实就是一个方法,没有关键字class

//es5中类的写法,但是这样直接用方法名调用并不会报错
var Person = (function () {
function Person(name) {
this.name = name;
}
Person.prototype.SayHello = function () {
window.alert("My name is " + this.name + ".");
};
return Person;
})();
var p = Person()//不报错

为了实现类似于es6中的调用检查,我们需要自己手写一个调用检查的函数。这个函数的原理就是用当前的this和构造函数进行比较,如果这个this指向的window,那么可以看出是用通过方法名直接调用的,如果this是构造函数那么就是通过new得到的

var  Person  = (function () {
//类的调用检测
function _classCheck(instance, constructor) {
if (!(instance instanceof constructor)) {
throw new Error('Class constructor Child cannot be invoked without new')
}
}
function Person(name) {
this.name = name;
_classCheck(this, Person)
}
Person.prototype.SayHello = function () {
window.alert("My name is " + this.name + ".");
};
return Person;
})();
var p = Person()

子类会继承父类的公有属性和静态方法

es6中的写法

//es6中的写法
class Child extends Person {
constructor() {
super()
this.name = 1;
}
}
//es5中的写法
var Clild = (function (Person) {
//类的调用检测
function _classCheck(instance, constructor) {
if (!(instance instanceof constructor)) {
throw new Error('Class constructor Child cannot be invoked without new')
}
}
//子类继承父类的方法
function _inherins(subclass, superclass) {
subclass.prototype = Object.create(superclass.prototype, { constructor: { value: subclass } })
Object.setPrototypeOf(subclass, superclass)
}
_inherins(Clild, Person)
function Clild() {
let obj=Person.call(this)//子类继承私有属性
let that=this;
if(typeof obj=='object'){
that=obj
}
that.name=1;//解决了父类是引用类型的问题
_classCheck(this, Clild)
return that
}
return Clild;
})(Person);

es6中的类及es5类的实现的更多相关文章

  1. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  2. ES6中的类继承和ES5中的继承模式详解

    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...

  3. ES6中。类与继承的方法,以及与ES5中的方法的对比

    // 在ES5中,通常使用构造函数方法去实现类与继承 // 创建父类 function Father(name, age){ this.name = name; this.age = age; } F ...

  4. Nodejs与ES6系列4:ES6中的类

    ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...

  5. ES6中的类

    前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...

  6. 160803、如何在ES6中管理类的私有数据

    如何在ES6中管理类的私有数据?本文为你介绍四种方法: 在类的构造函数作用域中处理私有数据成员 遵照命名约定(例如前置下划线)标记私有属性 将私有数据保存在WeakMap中 使用Symbol作为私有属 ...

  7. TypeScript完全解读(26课时)_8.ES6精讲-ES6中的类(进阶)

    8.TypeScript完全解读-ES6精讲-类(进阶) 在index.ts内引入 Food创建的实例赋值给Vegetabled这个原型对象,这样使用Vegetables创建实例的时候,就能继承到Fo ...

  8. 深入ES6中的class类

    今天在学习vuex时,遇到了定义store类时的一种写法,就是在类中的方法使用箭头函数绑定this的问题时的一种操作,感觉写法有点陌生,遂深究一番,好了上代码 此处写commit中的地方,是为了绑定t ...

  9. ES6中的class类的理解

    传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...

随机推荐

  1. STP-18-Port-Channl上的负载均衡

    Ether Channel通过在多条链路上传输多个数据帧,增加了可用带宽.一个以太网帧总是通过一个Ether Channel中的一条链路传输.针对数据帧地址字段执行散列计算能够产生一个编号,标识这个数 ...

  2. Luogu P3223 [HNOI2012]排队 组合

    本来做了一道  P4901 排队 后来发现自己做错题了...到也都是数学qwq 这题最恶心的就是两只(雾)老师. 那我们分类讨论: 1.两个老师之间是男生: $ A(n,n)*A(n+1,2)*A(n ...

  3. 如何将拷贝过来的数据 *.ibd 文件生效

    1.将拷贝的数据文件   "qqq.idb"放在自己的数据库中. 一般存放在  mysql/ data/ databasename 下 2. "qqq.idb" ...

  4. spark_spark连接hive config

    1 环境 hadoop2.7.3 apache-hive-2.1.1-bin spark-2.1.0-bin-hadoop2.6 jdk1.8 2 配置文件 在hive-site.xml中配置mysq ...

  5. 切换本地凭据(Windows上登录的GitHub账号)

    切换本地用户,可以向微软小娜搜索Windows凭据,这个步骤可以参考这篇博客 的说明.

  6. 分享到qq空间等代码

    <!-- Baidu Button BEGIN --><div id="bdshare" class="bdshare_t bds_tools get- ...

  7. Vue打包后页面出现cannot get

    学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ...

  8. 移动端真机调试工具--DebugGap (VIDE)

    越来越多的移动端开发工作,需要我们有一个好的调试工具,以解决各类真机才会遇到的BUG,最近使用了一款DebugGap 的工具,非常方便,在这里推荐给大家. 官网地址 DebugGap  . 按需求下载 ...

  9. 跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面

    1.app启动画面设计 用photoshop设计启动画面,图片分辨率为720*1280 保存的文件名为splash.png 将splash.png复制到res\drawable,如图 PS:要先添加闪 ...

  10. 跨平台移动开发phonegap/cordova 3.3全系列教程-简介

    一.   跨平台實現架構: phonegap +asp.net+jquery mobile/jqmobi 二.   PhoneGap简介 PhoneGap是一个开源的开发框架,用来构建跨平台的使用HT ...