如何使用表格做网站,上海高品质网站建设,网站建设的小故事,在线平面广告设计javascript中的class
start
最近在学习#xff1a;cocos #xff0c;准备自己制作小游戏。过程中遇到不少疑问#xff0c;我计划将这些疑问写成一个系列博客#xff0c;用以记录。这篇文章来了解 class
1. 前言
1. 前言
本文对应版本 Cocos Creator 3.8。Cocos Creato…javascript中的class
start
最近在学习cocos 准备自己制作小游戏。过程中遇到不少疑问我计划将这些疑问写成一个系列博客用以记录。这篇文章来了解 class
1. 前言
1. 前言
本文对应版本 Cocos Creator 3.8。Cocos Creator3.x编写脚本的语言是 TypeScript在了解 TypeScript 中的语法之前我们先掌握 javascript 中的 class。后面为了方便描述javascript 我简称为 jsTypeScript 简称为 ts ts 可以理解为是具有类型语法的js用大白话说ts 是基于 js扩充了类型语法。 本文仅对 class 主要内容进行说明更详细说明可参考 阮一峰-ECMAScript 6 入门-class基础语法
2. class 基础介绍
2.1 如何定义class
// 直接使用 class 关键词定义即可
class Point {}注意事项 class 小写Point 也就是类名按规范推荐首字母大写和定义函数不同定义类类名后不需要增加小括号 2.2 如何使用class
定义一个 class 结合 new 关键词我们可以创建一个对象创建出来的对象我们叫它实例对象
比如
class Point {}var p new Point()
// p 就是一个实例对象2.3 class 可以看做 es5 中构造函数写法的语法糖
js 中创建实例对象是有两种方式:
在早期的代码中往往会通过构造函数的方式去实现。在 es6 中引入了 class 关键词通过 class 实现。
class 的绝大部分功能ES5 都可以做到。因此为了加深印象在学习 class 关键词的时候相同代码我会列出 ES5 中如何实现的。
es6中的“类”
class Point {constructor(x, y) {this.x x;this.y y;}toString() {return ( this.x , this.y );}
}var p new Point(1, 2)es5中的“类”
function Point(x, y) {this.x xthis.y y
}Point.prototype.toString function () {return ( this.x , this.y )
}var p new Point(1, 2)// 构造函数的形式注意事项 直接对类使用 new 命令跟构造函数的用法完全一致类的所有方法都定义在类的 prototype 属性上面 3. class 中的 constructor() 方法
3.1 基础说明
constructor() 方法是类的默认方法通过 new 命令生成对象实例时自动调用该方法。 一个类必须有 constructor() 方法如果没有显式定义一个空的constructor()方法会被默认添加。 constructor()方法默认返回实例对象即this。除了默认对象也可以指定返回另外一个对象。 3.2 个人理解
简单来说constructor 对标 ES5 中的构造函数。我们可以在 constructor 定义 new 输出的实例对象。class 中constructor 必须要有不写会默认添加。
如下图 4. class 中定义的属性和方法
4.1 实例属性
由上文得知我们定义实例对象上的属性需要在 constructor 定义。ES2022为类的实例属性又规定了一种新写法。
如下
写法一
// 原来的写法
class Demo {constructor() {this._count 0;}add() {this._count;}
}var d new Demo()
console.log(d) // { _count: 0 }写法二
// 新的写法
class Demo {_count 0 // _count会绑定在实例对象上add() {this._count}
}var d new Demo()
console.log(d) // { _count: 0 }这样写好处非常明显定义实例对象的属性的时候可以更加简洁明了。 ps: Cocos Creator3.x 中定义实例属性就是使用的 写法二 更加简洁明了。 注意事项 实例属性顾名思义定义的属性是实例对象自身的属性而不是定义在实例对象的原型上面。参考上方的示例代码。实例属性对应d上的属性而不是 Demo.prototype上的属性 4.2 class中定义的方法
和实例属性不同class 中直接定义的函数是定义在实例对象的原型对象上如下图示例。 为什么属性和方法有这样的不同为什么要这么做 js 中当我们试图访问一个对象的属性时如果该对象本身没有这个属性那么 js 会在对象的原型对象上查找这个属性依次类推直到找到属性或者达到原型链的顶端。 这样就保证了我们的函数定义在实例对象的原型上实例对象是可以访问调用的。 所有的实例都可以共享同一个方法而不是每个实例都存储一份方法的副本。这种做法可以节省内存。 将方法放在原型上我们还可以实现方法的继承和重写。子类可以通过在其原型上添加或重写父类的方法来实现继承或重写。 注意事项 class 中直接定义的函数实际上是定义在实例对象的原型对象上 5. 取值函数getter和存值函数setter
“类”的内部可以使用get和set关键字对某个属性设置存值函数和取值函数拦截该属性的存取行为。
5.1 如何定义
class MyClass {constructor() {// ...}get prop() {return getter;}set prop(value) {console.log(setter: value);}
}let inst new MyClass();inst.prop 123;
// setter: 123inst.prop
// getter// prop是一个属性通过 get和set关键字拦截 prop 的存取。
// 能拦截属性的存取就可以根据我们自身的需求去增加逻辑7. 静态方法和静态属性 static
函数其实本身也是一个对象而class定义的类其实也是一个对象。这个对象本身是可以存储属性的。这些属性我们就叫它静态方法和静态属性。
在 class 中为了方便定义一个静态属性我们可以在属性前增加关键词 static 用以表示。
ES5 中定义静态方法
function Point(x, y) {}Point.like lazyTomatoPoint.say function () {console.log(我是say方法)
}
ES6 中 class 旧版的定义静态方法
class Point {}
Point.like lazyTomato
Point.say function () {console.log(我是say方法)
}ES6 中 class 使用static关键词定义静态方法
class Point {static like lazyTomatostatic say() {console.log(我是say方法)}
}注意事项 static 定义的就是静态属性和静态方法因为静态属性和静态方法直接定义在 class 上的属性和方法所以可以不用实例化直接调用。 8. 私有属性和私有方法
有时候我们定义在类上的属性或者方法仅供类内部使用不希望被实例对象调用。
这个时候就出现了希望能私有这些属性和方法的方式。 私有可以理解为就是仅供内部使用。 8.1 早期的实现方式
class Point {_conut:1_say() {console.log(不希望被实例对象调用的方法)}
}// 通过给属性或者方法增加 _ (下划线),表示这个属性或者方法是私有的。
// 但是这个方式并不是百分百保险的外部还是可以调用。8.2 利用 Symbol 值的唯一性
const bar Symbol(bar);
const snaf Symbol(snaf);export default class myClass{// 公有方法foo(baz) {this[bar](baz);}// 私有方法[bar](baz) {return this[snaf] baz;}// ...
};但是使用 Reflect.ownKeys() 依然可获取到这些属性。
const inst new myClass();Reflect.ownKeys(myClass.prototype)
// [ constructor, foo, Symbol(bar) ]8.3 使用 ES6中的
class Foo {#a;#b;constructor(a, b) {this.#a a;this.#b b;}#sum() {return this.#a this.#b;}printSum() {console.log(this.#sum());}
}
9.总结
9.1 总结一下 class 中的一些属性
名称定义在哪里示例实例属性实例对象class中定义的函数定义在实例对象的原型对象上get和set函数实例对象静态方法和静态属性类自身私有属性和私有方法类内部
9.2 不同的属性在谷歌浏览器中的展示效果
1.实例属性红色高亮 2.class中定义的函数红色偏灰 3.get和set方法红色更加灰 4.静态属性和静态方法 5.私有属性和私有方法 9.3 为什么 class 中有些属性可以直接通过 this 调用
示例代码一
class Point {num 1say() {console.log(我是say方法)}test() {console.log(this.num) // 问题1console.log(this.say()) // 问题2}
}把上面的代码换一种写法
示例代码二
class Point {constructor() {this.num 1}say() {console.log(我是say方法)}test() {console.log(this.num) // 问题1console.log(this.say()) // 问题2}
}
var p new Point()
p.test()问题1 为什么可以调用 this.num 因为谁调用函数函数this就指向谁执行 p.test() 时 this 指向 pp 本身有一个 num 属性所以可以正常调用。 问题2 为什么可以调用 this.say() 执行 p.test() 时 this 指向 pp 本身没有 say 方法但是它原型链上存在所以可以正常调用。 end
目前就class的基础内容就介绍到这里了。后续再补充 子类继承 等内容。
