ES6之Class 與ES5對比
類定義
ES6:
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}
ES5:
var Shape = function (id, x, y) { this.id = id; this.move(x, y); }; Shape.prototype.move = function (x, y) { this.x = x; this.y = y; };
類繼承
ES6:
class Rectangle extends Shape { constructor (id, x, y, width, height) { super(id, x, y) this.width = width this.height = height } } class Circle extends Shape { constructor (id, x, y, radius) { super(id, x, y) this.radius = radius } }
ES5:
var Rectangle = function (id, x, y, width, height) { Shape.call(this, id, x, y); this.width = width; this.height = height; }; Rectangle.prototype = Object.create(Shape.prototype); Rectangle.prototype.constructor = Rectangle; var Circle = function (id, x, y, radius) { Shape.call(this, id, x, y); this.radius = radius; }; Circle.prototype = Object.create(Shape.prototype); Circle.prototype.constructor = Circle;
基類訪問
ES6:
class Shape {
…
toString () {
return `Shape(${this.id})`
}
}
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
…
}
toString () {
return "Rectangle > " + super.toString()
}
}
class Circle extends Shape {
constructor (id, x, y, radius) {
super(id, x, y)
…
}
toString () {
return "Circle > " + super.toString()
}
}
ES5:
var Shape = function (id, x, y) {
…
};
Shape.prototype.toString = function (x, y) {
return "Shape(" + this.id + ")"
};
var Rectangle = function (id, x, y, width, height) {
Shape.call(this, id, x, y);
…
};
Rectangle.prototype.toString = function () {
return "Rectangle > " + Shape.prototype.toString.call(this);
};
var Circle = function (id, x, y, radius) {
Shape.call(this, id, x, y);
…
};
Circle.prototype.toString = function () {
return "Circle > " + Shape.prototype.toString.call(this);
};
靜態成員
ES6:
class Rectangle extends Shape {
…
static defaultRectangle () {
return new Rectangle("default", 0, 0, 100, 100)
}
}
class Circle extends Shape {
…
static defaultCircle () {
return new Circle("default", 0, 0, 100)
}
}
var defRectangle = Rectangle.defaultRectangle()
var defCircle = Circle.defaultCircle()
ES5:
var Rectangle = function (id, x, y, width, height) {
…
};
Rectangle.defaultRectangle = function () {
return new Rectangle("default", 0, 0, 100, 100);
};
var Circle = function (id, x, y, width, height) {
…
};
Circle.defaultCircle = function () {
return new Circle("default", 0, 0, 100);
};
var defRectangle = Rectangle.defaultRectangle();
var defCircle = Circle.defaultCircle();
getter/setter方法
ES6:
class Rectangle {
constructor (width, height) {
this._width = width
this._height = height
}
set width (width) { this._width = width }
get width () { return this._width }
set height (height) { this._height = height }
get height () { return this._height }
get area () { return this._width * this._height }
}
var r = new Rectangle(50, 20)
r.area === 1000
ES5:
var Rectangle = function (width, height) {
this._width = width;
this._height = height;
};
Rectangle.prototype = {
set width (width) { this._width = width; },
get width () { return this._width; },
set height (height) { this._height = height; },
get height () { return this._height; },
get area () { return this._width * this._height; }
};
var r = new Rectangle(50, 20);
r.area === 1000;
相關推薦
ES6之Class 與ES5對比
類定義 ES6: class Shape { constructor (id, x, y) { this.id = id this.move(x, y)
es6宣告物件以及作用域與es5對比
es6宣告變數: let x=1;//宣告一個變數 const y=2;//宣告一個只讀常量,宣告時必須賦值,之後值不可修改 es5宣告變數: var z=3;//宣告一個變數 區別: let不存在變數提升,而var存在 ps:變數提升---先解析程式碼,獲取所有宣告的變
JavaScript ES6與ES5對比
轉自:http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8 很多React/Reac
ES6之class
tor 逗號 之間 ima 註意 type 屬性 clas method ES5中通常通過構造函數和原型的組合形式來創建對象。在ES6中引入class作為對象模板, Class定義語法 class point{ constructor(x,y){
實現動畫之CSS與JavaScript對比
運行時 理解 controls 進行 中間 PE osi 聰明人 為什麽 曾經某個時期,大多數開發者使用 jQuery 給瀏覽器中的元素添加動畫。讓這個淡化,讓那個擴大,很簡單。隨著互動的項目越來越復雜,移動設備的大量增加,表現性能變得越來越重要。Flash 被拋棄,有天賦
es6之class 基本用法解析
javaScript 語言中,生成例項物件的傳統方法是通過建構函式,與傳統的面嚮物件語言(比如 C++ 和 Java)差異很大,ES6 提供了更接近傳統語言的寫法,引入了 class(類)這個概念,作為物件的模板。通過class關鍵字,可以定義類。 es6 class 與es5的面向物件的區別: 寫法不同,
ES6之Class基本語法
簡介 ES6引入Class(類)這個概念,作為物件的模板。通過class關鍵字,可以定義類。新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法。 class Point { constructor(x, y) { this.x = x
Node.js框架之express與koa對比分析
提到Node.js開發,不得不提目前炙手可熱的2大框架express和koa。Express誕生已有時日,是一個簡潔而靈活的web開發框架,使用簡單而功能強大。Koa相對更為年輕,是Express框架原班人馬基於ES6新特性重新開發的敏捷開發框架,現在可謂風頭正勁,大有趕超Express之勢。 Exp
Anacodna之conda與 virtualenv對比使用教程,建立虛擬環境
conda建立虛擬環境 1.檢視包 conda list檢視安裝了哪些包 conda env list檢視有哪些虛擬環境 conda -V檢視conda的版本 2.建立虛擬環境,命名為myflaskapp,n就是指name;並安裝flask包。 Note that the conda create co
ES6之-----------------Class的基本使用
JavaScript 語言中,生成例項物件的傳統方法是通過建構函式,跟傳統的面嚮物件語言(比如 C++ 和 Java)差異很大;ES6 提供了更接近傳統語言的寫法,引入了 Class(類)這個概念,
前端UI框架——VueAPI使用之Class 與 Style 繫結
一、基本介紹 1、繫結 HTML Class 字串語法 物件語法 陣列語法 2、繫結內聯樣式——Style 物件語法 二、程式碼示例: 1、class(字串) 程式碼案例: <!DOCTYPE html> <html lang="en"&
RDD之flatMap與Map對比
定義 首先我們列出flatMap與Map的定義,可參考RDD API def map[U](f: (T) ⇒ U)(implicit arg0: ClassTag[U]): RDD[U]
ES6之Class類知識點總結(十三)
好的文章就要分享出來,讓更多的小夥伴看到、嗯、繼續推薦阮一峰大神的ES6文章,真的很棒,關於Class類的知識,想要了解的更清楚的建議到大神的官網走一走http://es6.ruanyifeng.com/#docs/class-extends我們知道ES5及之前是沒有類的概念
ES6之Set與Map加深理解
ash 就是 內存 ont 使用 函數的參數 ble 兩個 綁定 Set 類似於數組,但是成員的值都是唯一的,沒有重復的值,有序。 Set函數可以接受一個數組(或者具有 iterable 接口的其他數據結構)作為參數,用來初始化。 用途 數組去重: [...new Set(
負載均衡之LVS與Nginx對比
今天總結一下負載均衡中LVS與Nginx的區別,好幾篇博文一開始就說LVS是單向的,Nginx是雙向的,我個人認為這是不準確的,LVS三種模式中,雖然DR模式以及TUN模式只有請求的報文經過Director,但是NAT模式,Real Server回覆的報文也會經過Director Server地址重寫: !
ES6中。類與繼承的方法,以及與ES5中的方法的對比
// 在ES5中,通常使用建構函式方法去實現類與繼承 1 // 建立父類 2 function Father(name, age){ 3 this.name = name; 4 this.age = age;
ES5/ES6中的類與繼承對比
ES5中的類和靜態方法 function Persion(name,age) { //建構函式裡面的方法和屬性 this.name = name; this.age = age; this.getInfo = function(){ console.log(`姓名:${thi
es6的class寫法與es5的createClass都有哪些區別?
1. 前言 在使用React的時候,根據官方文件,發現了兩種建立元件的方式。一種是使用React.createClass({})的方式來建立,還有一種是使用ES6的class並繼承React.Component來建立。 剛開始學的時候自己覺得有點迷,並且一直都是使用ES6語法來建立元件(畢竟先進嘛)。這段時
技術分享之字串(es5和es6的對比)
2015年釋出了javascript的新規範es6,相比於之前的es5變動很大,這就需要我們花費一些時間去學習並使用。 字串作為一種基本資料型別,在講解它之前,我們來看一下資料型別方面es6相對於es5有哪些變化? 首先我們看一下es5的資料型別: es5包括兩種資料型別 1.基本資料型
ES6 class語法糖與ES5的原型鏈
ES5 function Obj(){} var person=new Obj(); person.__proto__.constructor===Obj.prototype.constructor; Object.getPrototypeOf(per