面试题 es6之 浅谈 class

class 类,ES6之后新增的

ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class deml {
	constructor(){
		//属性值
	}
	say(){
	//方法
	}
}

等同于
function deml(){
	//属性值
}
deml.prototype.say=function(){
	//方法
}

es5与es6的class类 使用的差异

  1. 类的所有方法都定义在类的prototype属性上面。
  2. 定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了
  3. 方法之间不需要逗号分隔,加了会报错
  4. ES6的class使用方法与ES5的构造函数一模一样
  5. es5的构造函数deml,对应es6的deml类的构造方法
  6. class类必须使用new调用,否则会报错。这是它跟普通构造函数 ( 普通构造函数完全可以当做普通函数使用 ) 的一个主要区别,后者不用new也可以执行。
constructor

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象
(得是在创造class时就定义设置的, 在创造完class后,通过Object.assign的方式是没法改变构造函数的返回值的)

getter和setter

与 ES5 一样,在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

class deml {
	constructor(age=0,name=0){
		this._age=age
		this._name=name
	}
	get age(){
		return this._age
	}
	set age(value){
		this._age=value;
        console.log("年龄"+value);
	}
}

??当使用 get set属性关键字时,只能操作他们的私有属性 需要在相应的属性名前加_ 下划线

class需要注意的几个点:

  1. 严格模式
    类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。
  2. 不存在提升
new demlk()
class demlk{}
>>>>>>>
上面代码会报错 ES6 不会把类的声明提升到代码头部
  1. this 的指向
    类的方法内部如果含有this,它默认指向类的实例。
    要注意在react中使用class 打包后this不会指向全局对象wind

static 关键字

class类中使用static定义的 不会被实例继承,而是直接通过类来调用。

class demo {
	static sum=5
}
let person = new demo()
person.sum  //??  is not defined
demo.sum  //5

Class的私有方法和私有属性

只能在类的内部访问的方法和属性,外部不能访问。
这是常见需求,有利于代码的封装,但 ES6 不提供,只能通过变通方法模拟实现。

 class Cat{
	 #eyes="眼睛";
	 static pai(){
		 console.log("凯文");
	 }
	 say(){
		 Cat.pai();
		 console.log("猫有一双大大的"+this.#eyes);
	 }
 }
let kate=new Cat();
kate.say();

私有属性也可以设置 getter 和 setter 方法。
私有属性不限于从this引用,只要是在类的内部,实例也可以引用私有属性。

extends 关键字

extends 为class的扩展类(继承),主要作用是 继承父类的属性方法

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}
class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
mycar = new Model("Ford", "Mustang");

当你继承父类是要修改相应的方法传值形式,需要在 constructor 中使用super()关键字 调用父类的constructor并将参数传递出去,

当只是普通的继承是不修改里面的任何东西,则不一定 子类非要constructor

posted @ 2022-02-23 15:18  xiao旭  阅读(283)  评论(0编辑  收藏  举报