Class(类)
前言ES6引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。但是JS 中并没有一个真正的 class 原始类型, class 仅仅只是对原型对象运用语法糖。所以,只有理解如何使用原型对象实现类和类继承,才能真正地用好 class。基本语法class Person{constructor(name,age){this.name = name;this.age = a
前言
ES6引入了
Class
(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
但是JS 中并没有一个真正的 class
原始类型, class
仅仅只是对原型对象运用语法糖。所以,只有理解如何使用原型对象实现类和类继承,才能真正地用好 class
。
基本语法
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
Say(){
return 'My name is ' + this.name;
}
}
var person1 = new Person('Ethel',18);
console.log(person1.Say());//My name is Ethel
代码解析
person1
是通过类Person
实例化出来的对象。对象person1
是按照类Person
这个模板,实例化出来的对象。实例化出来的对象拥有类预先订制好的结构和功能。
constructor
是一个构造函数方法,创建对象时自动调用该方法constructor
是默认存在的,可以省略,程序也可以调用this
指的是实例化对象- 类中声明的方法不能加
function
关键字 - 方法之间不要用逗号分隔,否则会报错
class类与原型的关系
class
类本质上就是一个函数,自身指向的就是构造函数
console.log(typeof Person);// function
console.log(Person.prototype.constructor === Person);//true
class
类是构造函数的另一种写法,仍然存在prototype
方法
console.log(Person.prototype);//object
可以通过原型prototype
修改类方法和新增方法
Person.prototype.Say = function(){
return 'My name is ' + this.name+',我是原型prototype声明同样的Say方法,把原有Say方法覆盖了';
}
person2 = new Person('Frank',20);
console.log(person2.Say());//My name is Frank,我是原型prototype声明同样的Say方法,把原有Say方法覆盖了
Person.prototype.Go = function(){
return 'I am ' + this.age + ' years old';
}
console.log(person2.Go());//I am 20 years old
还可以通过Object.assign
方法来为对象动态增加方法
Object.assign(Person.prototype,{
Eat:function(){
return this.name;
},
Run:function(){
return this.age;
}
})
person3 = new Person('Allen',20);
console.log(person3.Eat());//Allen
console.log(person3.Run());//20
也可以使用实例对象的__proto__
属性新增类的方法
person3 = new Person('Allen',20);
person4 = new Person('Morgan',21);
person3.__proto__.Play = function(){
return this.name;
}
console.log(person3.Play());// Allen
console.log(person4.Play());// Morgan
实例属性和原型属性
实例属性:constructor
里面的属性为实例属性,即定义在this
对象上
原型属性:除去实例属性都称为原型属性,即定义在class
类上
hasOwnProperty
方法:可以通过hasOwnProperty()
方法进行判断属性是否是实例属性
in
操作符:能够访问到属性时返回true
,无论是实例属性还是原型属性
class Person{
constructor(person1,person2){
this.person1 = person1;
this.person2 = person2;
}
Say(){
return person1+person2;
}
}
var box = new Person('Emily','Kristina');
console.log(Person.hasOwnProperty("person1"));//true
console.log(Person.hasOwnProperty("person1"));//true
console.log(Person.hasOwnProperty("Say"));//false
console.log("person1" in Person);//true
console.log("person2" in Person);//true
console.log("Say" in Person);//true
console.log("Go" in Person);//false
class类的继承
通过extends
关键字实现类的继承
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
getName(){
return this.name;
}
getAge(){
return this.age;
}
}
class Student extends Person{
getName(){
return '我覆盖了父级的方法,'+ this.name;
}
getScore(){
return '我是子级新增的方法,'+this.name;
}
}
var stu1 = new Student('Ethel',18);
console.log(sut1.getName());// 我覆盖了父级的方法,Ethel
console.log(sut1.getAge());//18
console.log(sut1.getScore());// 我是子级新增的方法,Ethel
通过super
关键字进行拓展父类构造器或方法
super作用
- 子类使用构造器
constructor
的时候,必须使用super
关键字,用来扩展构造器 - 子类同名方法会覆盖父类同名方法,使用
super
关键字后则可以调用到父类的同名函数
class Person{
constructor(name){
this.name = name;
}
getName(){
console.log('我是父级类getName方法输出来的');
}
getAge(){
console.log(this.age);
}
}
class Student extends Person{
constructor(name,age,sex){
super();//必须先调用super,才能使用constructor,才能使用this对象
this.name = name;
this.age = age;
this.sex = sex;
}
getName(){
super.getName();//调用super,才能调用父类同名函数getName
console.log('我是子级类getName方法输出来的');
}
}
var stu1 = new Student('Ethel',18);
stu1.getName();
// 我是父级类getName方法输出来的
// 我是子级类getName方法输出来的
static关键字
static
关键字是类的方法- 只能通过类名来调用,不能被实例对象调用
static
方法也可以被继承
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
static getAge(){
console.log('我是静态属性static');
}
}
class Student extends Person{}
var stu1 = new Student('Ethel',2);
Person.getAge();//我是静态属性static
Student.getAge();//我是静态属性static
stu1.getAge();//stu1.getAge is not a function
class 实例化的背后原理
使用 class
的语法,让开发者告别了使用 prototype
模仿面向对象的时代。但是,class
并不是 ES6
引入的全新概念,它的原理依旧是原型继承。
typeof class == "function"
通过类型判断,我们可以得知,
class
的并不是什么全新的数据类型,它实际只是function
(或者说object
)。
更多推荐
所有评论(0)