(精华)2020年7月4日 JavaScript高级篇 ES6(class类)
【摘要】
是什么
es6新提供的一种生成对象实例的写法 es5构造函数的另外一种写法(语法糖)
作用
无疑让写法更清晰 更像面向对象的写法
回顾之前es5生成实例对象
Person.prototype.s...
是什么
- es6新提供的一种生成对象实例的写法 es5构造函数的另外一种写法(语法糖)
作用
- 无疑让写法更清晰 更像面向对象的写法
回顾之前es5生成实例对象
Person.prototype.say = function(){
console.log('我会说话');
}
// 这是错误的写法
// Person.prototype.say = ()=>{
// console.log(`我是${this.name}`);
// }
function Person(name,age){
this.name = name
this.age = age
}
let person1 = new Person('张三',18)
person1.say()
class类生成实例对象
class Person{
constructor(name,age){
this.name = name
this.age = age
}
say(){
console.log(`我是${this.name}`);
}
}
let person2 = new Person('李四',20)
person2.say()
console.log(typeof Person); // function
console.log(person2.constructor === Person);
constructor 方法
// es6类的方法都定义在类的prototype属性上面
// 其实调用es6类的方法就是调用原型上的方法
class Car{
constructor(){
console.log(this);
// 指向其他的对象 null
return Object.create(null)
}
}
let bmw = new Car()
console.log(bmw instanceof Car)
共享一个原型对象
class Person{
constructor(name) {
this.name = name
}
}
Person.prototype.get = function(){
console.log('我是父类')
}
let person1 = new Person('张三')
let person2 = new Person('李四')
person1.get()
person2.get()
取值函数和存值函数
const person = {
get name(){
console.log(name);
return name
},
set name(value){
console.log(value);
name = value
}
}
person.name = 'tony'
// console.log();
console.log(person.name);
class MyClass{
get prop(){
return MyClass.prop
}
set prop(value){
MyClass.prop = value
}
}
let init = new MyClass()
init.prop = 123
console.log(init.prop);
this指向问题
// 第一种 箭头函数
eat = ()=>{
this.get()
}
// 第二种 绑定this
constructor(){
this.eat = this.eat.bind(this)
}
实例属性的新写法
class Person{
name = 'tony'
}
静态属性
// 静态属性 指的是class本身的属性 Class.propname 并不是实例的属性
class Person{
static age = 18 // 现在静态属性的写法
name = 'tony'
}
let person1 = new Person()
console.log(person1.age);// undefined
静态方法
// 静态方法
class Person{
static age = 18 // 现在静态属性的写法
static say(){
console.log('hello');
}
name = 'tony'
}
// let person1 = new Person()
Person.say()
私有属性
以前用闭包实现私有属性
class Math{
#count = 0
add(){
this.#count ++;
return this.#count
}
}
let math = new Math()
// console.log(math.#count); 会报错
console.log(math.add());
私有方法
class MathAdd{
#a;
#b;
constructor(){
this.#a = 1;
this.#b = 2;
}
#sum = ()=>{
return this.#a + this.#b
}
conSum(){
console.log(this.#sum());
}
}
let mathadd = new MathAdd()
// console.log(math.#count); 会报错
mathadd.conSum()
文章来源: codeboy.blog.csdn.net,作者:愚公搬代码,版权归原作者所有,如需转载,请联系作者。
原文链接:codeboy.blog.csdn.net/article/details/107131783
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)