js中的类
概述
经典的老书害人啊,全是讨论怎么解决javascript里面用函数形式定义类的坑。结果es2015直接用class关键字解决了所有问题。虽然class关键字没有什么新东西,只是js现有继承结构的语法糖,但是用起来真的很方便。我把它们记录下来,供以后开发时参考,相信对其他人也有用。
参考:MDN Classes,MDN class declaration,MDN class expression,MDN function declaration,MDN function expression
定义一个类
有以下四种方式定义一个类:
- es2015规定的,类声明,只能定义一次,不然会报错,没有hoisting,推荐使用。
- es2015规定的,类表达式,可以定义多次,后面覆盖前面的,没有hoisting,不推荐使用。
- 函数声明,有hoisting,不推荐使用。
- 函数表达式,没有hoisting,不推荐使用。
//类声明,推荐
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
//类表达式,不推荐
var Rectangle = class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
//函数声明,不推荐
function Rectangle() {
this.height = height;
this.width = width;
}
//函数表达式,不推荐
var Rectangle = function() {
this.height = height;
this.width = width;
}
类中的属性和方法
类中有静态和实例的属性和方法。相关的定义如下所示:
//es2015中类的定义方式,推荐
class Animal {
//constructor是静态方法,在里面定义实例属性(我们不需要静态属性)
constructor(x, y) {
this.x = x;
this.y = y;
}
//实例方法
speak() {
return this;
}
//静态方法
static eat() {
return this;
}
}
//函数形式,不推荐
function Animal(x, y) {
this.x = x;
this.y = y;
};
Animal.prototype.speak = function() {
return this;
}
Animal.eat = function() {
return this;
}
需要注意的是,es2015中类的定义方式中的this会指向undefined;而函数方式中的this会指向全局对象。
//es2015中类的定义方式
let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined
Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined
//函数方式
let obj = new Animal();
let speak = obj.speak;
speak(); // global object
let eat = Animal.eat;
eat(); // global object
静态和实例的区别
静态类型和实例类型的区别如下:
- 静态类型:类可以直接调用的类型(不能被实例直接调用),在内存中只占一块区域,创建实例时不额外分配内存。
- 实例类型:实例调用的类型,每创建一个实例,都会在实例中分配一块内存。
js中的类的更多相关文章
- JS中定义类的方法
JS中定义类的方式有很多种: 1.工厂方式 function Car(){ var ocar = new Object; ocar.color = "blue" ...
- JS中定义类的方法<转>
转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...
- js中的类和对象以及自定义对象
js中的类 1.类的声明 function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a ...
- js中尺寸类样式
js中尺寸类样式 一:鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width 1:检测相对于浏览器的位置:e ...
- koa 基础(十七)原生 JS 中的类、静态方法、继承
1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...
- 总结:js中4类修改样式的方法
前言 最近在写一个扩展右键菜单的插件,既然是插件,想着一步到位,把相关的style样式设置都丢进js文件中,直接加载一个js文件便可以使用该插件,所以今天就研究了下js批量的插入样式的方法,即addS ...
- js中有关类、对象的增强函数
javascript中继承的实现 基础实现 function Range(from,to){ this.from =from; this.to =to; } Range.prototype = { i ...
- js中对象 类 实例的区别 数据类型 创建对象
类是对象的具体细分,实例是类中的一个具体事物. 基本数据类型和 引用数据类型 基本数据类型:numble string undefined null 引用数据类型:对象和函数 对象数据类型又细分为:对 ...
- js中的类数组对象---NodeList
动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...
随机推荐
- source tree使用经验
FeatureXXX具体功能开发分支,从develop分支拉,功能开发自测完后合并到develop分支.来不及上线的feature分支不要合并到develop. develop开发分支,上面代码都是已 ...
- 使用 C++ REST SDK 进行网络编程
安装 C++ REST SDK $ brew install cpprestsdk $ brew install boost $ brew install libressl 创建工程 打开 Xcode ...
- asmx 接收数据过大 发生错误
原文:https://www.cnblogs.com/xinaixia/p/5945316.html 错误:已超过传入消息(65536)的最大消息大小配额.若要增加配额,请使用相应绑定元素上的 Max ...
- azkaban 配置邮件
1.配置邮件请在azkaban-web-server中进行配置:如下图: /opt/azkaban/azkaban/azkaban-web-server/build/install/azka ...
- mysql_day01
1.MySQL概述 1.什么是数据库 数据库是一个存储数据的仓库 2.都有哪些公司在用数据库 金融机构.游戏网站.购物网站.论坛网站 ... ... 3.提供数据库服务的软件 1.软件分类 MySQL ...
- Mysql添加新用户遇到的一些小问题
登陆命令:mysql -u root -p 添加本地用户:create user 'sheet'@'localhost' identified by '123456' ; 添加允许外网IP访问的用户 ...
- easyui combobox下拉框文字超出宽度有横向滚轮
//下拉框显示横向滚轮 $(".combo").mouseenter(function(){ $(this).prev().combobox("showPanel&quo ...
- [leetcode]254. Factor Combinations因式组合
Numbers can be regarded as product of its factors. For example, 8 = 2 x 2 x 2; = 2 x 4. Write a func ...
- MVC的SignalR例子
# SignalR学习 ASP.NET SignalR 是为.NET 开发者提供即时通讯Web 应用的类库.即时通讯Web服务就是服务器将内容自动推送到已经连接的客户端,而不是服务器等待客户端发起一个 ...
- JavaSE基础知识(1)—初识Java
一.JAVA的背景 JAVA本身隶属的公司的是sun公司(创始公司) JAVA创始人:詹姆斯 高斯林 09年被oracle收购 JAVA的前身是Oak 二.JAVA的版本 95年 JAVA诞生96年 ...