ES6-17 class与对象
2024-05-29 01:00:51
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与对象相关推荐
- es6学习笔记-顶层对象_v1.0_byKL
es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象 顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...
- js基础知识：es6中，当对象中的key名称为一个变量时，需要用`[]`括起来
es6中,当对象中的key名称为一个变量时,需要用[]括起来
- 【JavaScript 教程】ES6 中的 Promise对象 详解
[JavaScript 教程]ES6 中的 Promise对象 详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
- ES6中的异步对象Promise
回忆一下ES5中的怎么使用异步方法 // es5中的异步回调let ajax = function(callback){console.log('执行') // 执行setTimeout(() =&g ...
- 【ES6(2015)】Object对象
文章目录 1. 属性简洁表示法 2. 属性名表达式 3. Object.is() 4. Object.assign() 5. in 6. 对象的遍历方式 1. 属性简洁表示法 ES5表示Object必 ...
- es6 Class 的实例对象
Class 的实例对象 ES6 生成类的实例对象的写法,与 ES5 完全一样,也是使用new命令.前面说过,如果忘记加上new,像函数那样调用Class,将会报错. class Point { // ...
- ES6学习笔记（对象新增方法）
1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0. ...
- ES6对于特殊的对象的遍历（iterator）
简介 我们在处理数据的时候很多时候会遇到一些比较麻烦的数据,例如下面这样的一个例子 let NBA = {Team:{LAC:['Lebron James','Anthony Davis','Dwig ...
- ES6新特性_ES6对象添加Symbol类型属性---JavaScript_ECMAScript_ES6-ES11新特性工作笔记016
然后我们再来看,给对象添加symbol类型的属性, 这个这样做的目的就是: 保证我们添加的方法或属性是唯一的,因为我们知道 我们的symbol这个属性是有唯一性的. 首先我们有个 let game = ...
- ES6新特性_ES6对象的简化写法---JavaScript_ECMAScript_ES6-ES11新特性工作笔记008
然后我们再看一下,对象的简化写法 可以看到我们先声明,一个name,一个change方法 然后以前我们声明const变量,然后需要上面这样写 name:name change:change 现在不用了 ...
最新文章
- linux c 函数专挑,Linux C wait函数
- BZOJ-1854-[Scoi2010]游戏（并查集）
- 苹果cmsv10精仿迅播影院2tu风格主题模板
- java消费rabbitMQ队列消息
- RelativeLayout 常用属性
- ThinkPHP的四种URL模式 URL_MODEL
- Angular 2 Decorators - 2
- 136_原始套接字_链路层MAC包_模仿他人飞秋，给自己主机上的飞秋【发送UDP数据】【只需要修改包含用户名、头像信息的数组】
- 发布和订阅业务交易事件库（BTE事件及函数）
- PS——证件照换底色的极简方法
- Java实战---搜搜移动业务大厅
- 服务器安全－阿里自研补丁列表整理
- U盘在windows电脑中毒，插入Macbook变成exe文件
- 基于SpringBoot+Vue的宠物商场管理系统
- Linux服务器安装云锁
- 【Centos】查询命令
- 奔驰S400升级主动式氛围灯,大饼轮毂，4D旋转高音
- 关于音乐播放器锁屏播放，后台播放，封面显示等
- 【AI】VGG网络简介
- Qt 设置背景图片