class语法

21 篇文章 14 订阅

1,class了解

在es6之前,js实现继承都是通过prototype(原型链)的方式来实现的,

原型继承参考 https://blog.csdn.net/weixin_43322208/article/details/89349703

在es6出现之后,可以通过class来实现继承。
用新的class关键字来编写以往的构造函数,可以这样写:

//构造函数写法
function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

//class写法
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

var xiaoming = new Student('小明');
xiaoming.hello();

class的定义包含了构造函数constructor和定义在原型对象上的函数hello()(注意没有function关键字),这样就避免了Student.prototype.hello = function () {…}这样分散的代码。

2、constructor,类的初始化函数

class Person {
	constructor(name){
	    console.log('初始化');
    	this.name = name;
    }
}

let my = new Person('Tony');   // 实例化时,就执行constructor方法

3,extends-------class继承

用class定义对象的另一个巨大的好处是继承更方便了使用extends。创建一个PrimaryStudent 继承上方的Student构造函数

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name);                     // 记得用super调用父类的构造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

extends则表示原型链对象来自Student

ES6引入的class和原有的JavaScript原型继承有什么区别呢?实际上它们没有任何区别,class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之,用class的好处就是极大地简化了原型链代码。

缺点:
因为不是所有的主流浏览器都支持ES6的class(IE目前都不支持)。如果一定要现在就用上,就需要一个工具把class代码转换为传统的prototype代码,可以试试Babel这个工具

4、使用set和get函数,对指定属性的设置/获取进行拦截

class MyClass {
  constructor() {
    // ...
  }
  // 获取prop属性时,触发get方法
  get prop() {
    console.log('getter:');
    return 'default props value';
  }
  // 设置prop属性值时,触发set方法
  set prop(value) {
    console.log('setter: ' + value);
  }
}
let inst = new MyClass();
inst.prop = 123;    // 'setter: 123'
console.log(inst.prop);    // 'getter:'

5、static关键字为类定义静态方法-----只能在类上调用,无法在类的实例上调用

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  static hello() {  // static method
    return "Hello!!";
  }
}

let mycar = new Car("Ford");

//在类 Car 上调用 'hello()':
Car.hello();

//不要在 'mycar' 对象上调用:会引发错误
// mycar.hello();

6、私有属性与私有方法

私有属性

  • 属性名前加#;
  • 只有在类内部可访问,外部无法访问(通过类的实例、类都无法访问私有变量)
  • 如果真的需要获取,只能通过调用类中的某个方法,返回私有属性的值
class Foo {
 publicFieldName = 1;     // 公有属性
 #privateFieldName = 2;   // 私有属性
 add() {
  return this.publicFieldName + this.#privateFieldName;
 }
}

let foo = new Foo();   
// foo.#privateFieldName       // 报错:`Private field '#privateFieldName' must be declared in an enclosing class`

// Foo.#privateFieldName      // 报错:同上
  • 私有方法
class Foo {
 constructor() {
  this.#say();
 }
 #say() {
   console.log('私有的方法!')
 }
}
let foo = new Foo();   
// Foo.#say()    // 报错!
// foo.#say()    // 报错!

7、static、public、private、protected 的区别

在这里插入图片描述

参考链接:https://www.liaoxuefeng.com/wiki/1022910821149312/1072866346339712

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值