ES6-17 class與對象

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)}}
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250980.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250980.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250980.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！