js——class基础
js的类?其实还是原型!
class Point{
constructor(x, y){
this.x = x;
this.y = y;
}
toString(){
return '(' + this.x + ',' + this.y + ')';
}
}
基本点
1. class是关键字,class Point定义了一个“类”。其它变量名不能与类名相同
2. Point的类型(typeof):function,必须通过new来调用
- class的pototype=>包含在class中所有定义的方法(包括constructor)
Point.protoype;//{constructor: ƒ, toString: ƒ}
3. 与函数一样,类也可以使用表达式的形式定义
var MyPoint = class{};
var mypoint= new Mypoint();不会变量提升:必须先定义才可以使用class
- name属性(就像函数名),同样的,class后的名称只能在类内部使用
MyPoint.name;//MyPoint
var MyPoint2 = class me{};
MyPoint2.name;//MyPoint2
mypoint = new me();//报错,me未定义,只能在类内部使用
4. constructor是构造函数
- 通过new Point来实例化一个对象,且会自动调用class中的contructor
- 返回值:默认返回实例对象this,可指定其它返回值(与es5相同)
- 可省略?如果不显式写一个constructor,会自动添加一个空的(与C++相同)
- Point.prototype.contructor是class,而不是contructor函数
var point = new Point();
console.log(point.constructor===Point);//trueconstructor中的this指向实例化后的对象,与es5中的相同
console.log(point);//Point {x: undefined, y: undefined}
5. 对象属性的定义:在constructor中用this来添加; 对象方法的定义:在class中直接定义(不加function和逗号)
6. 在class中定义的方法不可枚举
Object.keys(Point.prototype);//结果为空,说明不可枚举
//es5中可枚举
function Test(){}
Test.prototype.fun1 = function(){};
Object.keys(Test.prototype);//[fun1]可枚举
7. 实例对象
- 共享一个原型对象(与es5相同)
var p1 = new Point();
var p2 = new Point();
p1.__proto__ === p2.__proto__;//true原型对象的方法可直接在class中添加,那如果要添加属性呢=>getPrototypeOf / Point.prototype上添加
point.__proto__ === Point.prototype;//true
var pProto = Object.getPrototypeOf(point);
pProto.newAttr = 1;
point.newAttr;//
8. 静态方法和属性(static)
- 它们是属于class,而不属性实例(与C++相同)
- 静态属性只能在class外由类来添加
class StaticClass{
static constructor(){//定义一个静态方法
console.log(this);//class{...}
}
constructor(){
console.log(this);//指向实例对象
}
}
StaticClass.attr = 1;//定义一个静态属性静态方法中的this指向的是class!
9. new的新属性new.target
- 函数或class通过new调用,那么在它们内部使用new.target返回自身,否则返回undefined
- 可以用于区分一个函数是否是通过new调用的
function Point1(){
console.log("new.target结果:", new.target);
}
Point1();//undefined
var p = new Point1();//function Point1(){...}在class中使用
var targetClass = class me{
constructor(){
console.log(new.target===targetClass);//true
console.log(new.target===me);//true
}
}
var tclass = new targetClass();
js——class基础的更多相关文章
- node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法
1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...
- Node.js系列基础学习----安装,实现Hello World, REPL
Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)
函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) { return i1 + i2;//如果不写return返回 ...
- JavaScript--我发现,原来你是这样的JS(基础概念--灵魂篇,一起来学js吧)
介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第三篇(灵魂篇介绍),有着剩下的第三章的知识内容,当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的,要看懂 ...
- js复习--基础
最近工作遇到了一些小困难,基础真的很重要,漫天高楼起于地. 一,script元素 包括type=“text/Javascript”,defer延迟到html加载完解析,src=“../../test. ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- JS零基础一步一步做应用全记录
1.起因 作为几个外卖重度依赖癌晚期患者,呆宿舍的时候几个人一起叫外卖已经是常事.偶然看到隔壁宿舍在饿了么订餐的时候,看到在饿了么的首页上有一个谁去拿外卖的一个小游戏/工具,感觉这个小细节,饿了么把握 ...
- 认识JS的基础对象,定义对象的方法
JS的基础对象: 1.window //窗口对象 2.document //文档对象 3.document.documentElement //html对象 4.docume ...
- 贰、js的基础(一)
1.js的语法 a.区分大小写 b.弱类型变量:变量无特定类型 c.每行结尾的分号可有可无 d.括号用于代码块 e.注释的方法与c语言和java相同 2.变量 注意事项: a.通过关键字var来声明. ...
随机推荐
- treap基本操作
利用rand保持堆的特性 const int N=; int ls[N],rs[N],v[N],p[N],cnt[N],siz[N]; // 权值 优先级 inline void update(int ...
- 【webpack】中clean-weabpack-plugin使用方法
在webpack中打包的文件通常是通过hash生成的,如果文件改动,那么打包的文件就会越来越多,如果想清除之前的文件,可以使用clean-weabpack-plugin插件来处理 注意版本号:我使 ...
- 理解position定位
使用css布局position非常重要,语法如下: position:static | relative | absolute | fixed | center | page | sticky 默认值 ...
- mysql报错:Cause: com.mysql.jdbc.PacketTooBigException
报错信息: Error updating database. Cause: com.mysql.jdbc.PacketTooBigException: Packet for query is too ...
- 浏览器通知--window.Notification
参考链接:http://blog.csdn.net/guoquanyou/article/details/51726571 Web Notifications是HTML5 的一个特性,目前我知道的有谷 ...
- 影子节点 shadowDOM
示例: <video controls autoplay name="media"> <source id="mp4" src="t ...
- 资源中心的ES 服务的COM.IFLYTEK.ERSP.API.RESOURCEAPI 接口注册ZOOKEEPER失败,解决记录
No provider available for the service com.iflytek.ersp.api.ResourceApi from the url zookeeper://zook ...
- UVA1194 Machine Schedule
题目地址:UVA1194 Machine Schedule 二分图最小覆盖模型的要素 每条边有两个端点,二者至少选择一个.简称 \(2\) 要素. \(2\) 要素在本题中的体现 每个任务要么在 \( ...
- python下划线,私有变量
转自:http://blog.sina.com.cn/s/blog_58649eb30100g4zo.html Python用下划线作为变量前缀和后缀指定特殊变量. "单下划线" ...
- Python运维开发基础06-语法基础【转】
上节作业回顾 (讲解+温习120分钟) #!/usr/bin/env python3 # -*- coding:utf-8 -*- # author:Mr.chen # 添加商家入口和用户入口并实现物 ...