class

• 模擬類的方式
• 語法糖（把以前的寫法換了一個方式）

類內部的方法是不可枚舉的

• ES5用Object.assign拓展的原型屬性是可枚舉的

function Point(x, y) {this.x = x;this.y = y; } // 這樣定義的原型上方法eat\drink是可枚舉的 Point.prototype = Object.assign(Point.prototype, {eat: function () { },drink: function () { }, })

• ES6定義的公有屬性是不可枚舉的

class Point {constructor(x, y) {// 實例化的屬性配置：私有屬性this.x = x;this.y = y;}// 公有屬性：原型上的方法toString() {return '(' + this.x + ', ' + this.y + ')';} } const p = new Point(1, 1) console.log(p) console.log(p.toString())

默認指定constructor

class Point{} const p = new Point() console.log(p)

class Foo {constructor() {return Object.create(null);} }new Foo() instanceof Foo // false

表達式寫法和IIFE

// 看起來很怪異 let Point = class { } const p = new Point() console.log(p)let person = new class Person { }() console.log(person)

let person = new class Person {constructor(name, age) {this.name = name;this.age = age;} }('Lee', 10) console.log(person)

存在TDZ 不可提升

ES7私有屬性新寫法

• class可以定義公有方法，不可定義公有屬性

class Point {// ES7新寫法，依然是私有屬性x = 1;y = 1;// 公有屬性：原型上的方法toString() {return '(' + this.x + ', ' + this.y + ')';} } console.log(new Point().toString()) // (1,1)

公有屬性的私有方法

Symbol

const _print = Symbol() console.log(_print) class Point {// ES7新寫法，依然是私有屬性x = 1;y = 1;// 公有屬性：原型上的方法toString() {return '(' + this.x + ', ' + this.y + ')';}[_print]() {console.log('公有屬性私有化')} } console.log(new Point().toString()) // (1,1) new Point()[_print]() // 公有屬性私有化 // new Point()._print() // 這樣訪問不到 console.log(new Point())

將方法定義到class外部

• class內部不能直接使用x y

class Point {x = 1;y = 1;print() {// 注意 這里不能直接使用x y_print.call(this, this.x, this.y);}} function _print(x, y) {console.log(this.x, this.y) } new Point().print() // 1 1 console.log(new Point())

static靜態方法

• 只能是方法不能是屬性？

類中定義取值、存值函數

class Point {get a() {console.log('取值函數')}set b(val) {console.log('存值函數', val)} } const p = new Point() p.a // 取值函數 p.b = 10 // 存值函數 10

類中默認使用了嚴格模式

繼承extends

name為什么為什么不報錯

super

• super可以指向原型對象

let proto = {y: 20,z: 40 } let obj = {x: 10,foo() {console.log(super.y)} } Object.setPrototypeOf(obj, proto) obj.foo() // 20

轉譯ES5

Object.keys(Object.prototype) // []

TDZ

use strict

不可枚舉

只能通過new方式調用

不傳參數不會報錯

class Person {constructor(name = 'Lee', age = "18") {this.name = name;this.age = age;}say() {console.log('say')}drink() {console.log('drink')}static eat() {console.log('static eat')} } "use strict"; // 嚴格模式// 只能通過new方式調用 new方式調用下，this才指向實例 function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");} }function _defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];// 原型上的屬性默認是不可枚舉的descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);} }// 傳入構造器 公有方法（在原型上的方法）靜態方法（只能通過類調用） function _createClass(Constructor, protoProps, staticProps) {if (protoProps) _defineProperties(Constructor.prototype, protoProps);if (staticProps) _defineProperties(Constructor, staticProps);return Constructor; }// 函數表達式 變量聲明提升 TDZ var Person = /*#__PURE__*/function () {function Person() {// 參數默認值var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Lee';var age = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "18";_classCallCheck(this, Person);this.name = name;this.age = age;}_createClass(Person, [{key: "say",value: function say() {console.log('say');}}, {key: "drink",value: function drink() {console.log('drink');}}], [{key: "eat",value: function eat() {console.log('static eat');}}]);return Person; }();

裝飾器

• npm install -D @babel/plugin-proposal-decorators
• 淘寶npm鏡像pm i babel-plugin-transform-decorators-legacy --save-dev --registry=https://registry.npm.taobao.org
• 配置babelrc
• 沒安裝前，在瀏覽器運行代碼報錯Uncaught SyntaxError: Invalid or unexpected token
• npx babel app.js --watch --out-file bundle/app.js 實時監聽

{"presets": ["@babel/preset-env"],"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] } @testable class Person {constructor(name = 'Lee', age = "18") {this.name = name;this.age = age;}say() {console.log('say')}drink() {console.log('drink')}} let person = new Person() console.log('person', person) // person Person { name: 'Lee', age: '18' } function testable(target) {console.log('testable', target) // testable [Function: Person] }

• 安裝插件后打包，在index.html中引入打包后的文件，瀏覽器打印出正確結果
  

@testable class Person {constructor(name = 'Lee', age = "18") {this.name = name;this.age = age;}@readOnlysay() {console.log('say hi')} } let person = new Person() person.say() function testable(target) {console.log('testable', target) } function readOnly(target, name, descriptor) { // target - 原型 // name - 方法名 // descriptor - 該方法的屬性描述符console.log('readOnly', target, name, descriptor) }

使用場景 - 埋點

• 在原本的功能上添加埋點功能

class AD {@log('show')show() {console.log('ad is show')}@log('click')click() {console.log('ad is click')} } let ad = new AD() ad.show() function log(type) {return function (target, name, descriptor) {let src_fn = descriptor.value; // 函數體descriptor.value = (...args) => {src_fn.apply(target, args);// 以下是埋點要做的console.log('埋點', type)}} }

總結

以上是生活随笔為你收集整理的ES6-17 class与对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。