ES6中的class 与prototype
一、定义构造函数
在以前的js中,生成一个对象实例,需要先定义构造函数,然后通过prototype 的方式来添加方法,在生成实例:
function Person(){
this.name = "测试";
this.age = 26;
} Person.prototype.getName = function(){
console.log("name:" + this.name) } var p = new Person()
然而系现在的ES6
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
} var p = new Person("luoqiang",26)
在ES5中原本的构造函数被constructor 替代,本来需要定义在prototype上面的,方法直接定义在class里面即可。
ES6中的类的数据类型就是函数,类本身指向构造函数,使用的时候也需要new命令。
类中所有的方法都定义在类的prototype属性上面。
class B {}
let b = new B(); b.constructor === B.prototype.constructor // true
二、Class 的静态方法
ES6 中类有静态方法,即一个方法前加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用。
class Food {
static classMethod() {
return 'hello'
}
} Food.classMethod() // "hello" var poo = new Food();
poo.classMethod() // TypeError: poo.classMethod is not a function
通过类直接调用,输出的是hello,实例化以后不能调用。
PS:
在react、 RN中,this.state ={} 这种写法是在constructor 里面定义实例属性。
class ReactCounter extends React.Component {
state;
constructor(props){
super(props);
this.state = {
count:0
}
}
}
super(props)是继承父类的props 属性,state是在子类中定义实例属性。
三、class 继承
以前的继承方式:
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.getName = function(){
console.log("name:" + this.name);
} function Stu(stu_class,name,age){
Person.call(this,name,age);
this.stu_class=stu_class;
} Stu.prototype=new Person;
Stu.prototype.constructors=Stu;
Stu.prototype.getClass=function(){
console.log("班级:" + this.stu_class)
} // 得到一个学员信息对象 var s= new Stu()
console.log(s)
ES6的继承:
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
getName(){
return this.name;
}
} class Student extends Person{
constructor(stu_class,name,age){
//需注意如果一个子类继承父类,必须调用super,才能使用constructor,使用this
super(name,age)
}
getClass(){ console.log("班级:"+this.stu_class)
}
} var p=new Person("luoqiang",26)
console.log(p)
注意点:
Class 定义方法是不能使用箭头函数
Class 也可以使用表达式方式声明
参考:https://blog.csdn.net/luoqiang0831/article/details/79641133
ES6中的class 与prototype的更多相关文章
- TypeScript完全解读(26课时)_8.ES6精讲-ES6中的类(进阶)
8.TypeScript完全解读-ES6精讲-类(进阶) 在index.ts内引入 Food创建的实例赋值给Vegetabled这个原型对象,这样使用Vegetables创建实例的时候,就能继承到Fo ...
- ES5和ES6中的继承 图解
Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...
- Nodejs与ES6系列4:ES6中的类
ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...
- ES6中Arguments和Parameters用法解析
原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式.除了其它新特性外,我们还可以使用rest参 ...
- ES6中的Class
对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重 ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- ES6中的Symbol类型
前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型——Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个 ...
- ES6中的Set和Map集合
前面的话 在ES6标准制定以前,由于可选的集合类型有限,数组使用的又是数值型索引,因而经常被用于创建队列和栈.如果需要使用非数值型索引,就会用非数组对象创建所需的数据结构,而这就是Set集合与Map集 ...
- ES6中的类
前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...
随机推荐
- 访问C指针的指针
#include <stdio.h> #include <stdlib.h> int main(int argc,char **argv){ void* vp; void** ...
- H5 性能调优 工具
1.阿里测:http://www.alibench.com 2.奇云测:http://ce.cloud.360.cn 3.百度应用性能检测中心:http://apm.baidu.com 推荐理由:这3 ...
- 【MVC】初识MVC
一.MVC是什么? MVC(Model-View-Controller),是视图-模型-控制器的框架,刚開始看见这些概念的时候,我以为是U-D-B呢?视图界面,模型是相应这数据库呢,而控制器是 ...
- MSComm串口类的使用 (程序设计)
参考文档:http://wenku.baidu.com/link?url=MLGQojaxyHnEgngEAXG8oPnISuM9SVaDzNTvg0oTSrrJkMXIR_6MR3cO_Vnh-gr ...
- Oracle 优化器
http://blog.csdn.net/it_man/article/details/8185370一.优化器基本知识 Oracle在执行一个SQL之前,首先要分析一下语句的执行计划,然后再按执 ...
- Coursera上的machine learning学完啦
Coursera上的第一门公开课最终要结束啦-- 全部的代码http://download.csdn.net/detail/abcd1992719g/7306053 老师的Octave代码很赞.框架打 ...
- CSS解决无空格太长的字母,数字不会自己主动换行的问题
事实上非常easy,代码例如以下所看到的,注意 Style: <div class="detail_title" style="word-break: break- ...
- Ajax请求的跨域(CORS)问题
用浏览器,通过XHR(XMLHttpRequest)请求向另外一个域名请求数据时.会碰到跨域(CORS)问题. CORS:Cross-Origin Resource Sharing 什么是跨域? 简单 ...
- 网络工具的瑞士军刀netcat
这是一个聒噪的夜晚,假设要给出个原因.可能是由于尽管我认为西班牙不纯粹,可是怎么也不至于干为人家搭台面自己不唱戏的角色吧..结束以后.我认为该玩一下素有网络瑞士军刀之称谓的netcat了. 尽管瑞士军 ...
- uva 11404 dp
UVA 11404 - Palindromic Subsequence 求给定字符串的最长回文子序列,长度一样的输出字典序最小的. 对于 [l, r] 区间的最长回文串.他可能是[l+1, r] 和[ ...