class类
- 在es6之前是通过函数来定义一个类,也就是说构造函数
- ES6使用class来定义一个类,相当于是使用函数来定义类的语法糖
$$$$首先来说一下在ES6之前使用函数定义类(构造函数)的用法
- 一个函数在没有return之前就输出调用的话,返回的就是undefined
function sum(){
}
console.log(sum()) //undefined
但是如果是new实例了之后返回的就是一个实例化对象,也就是说p就是一个实例化对象
function sum(){
}
var p = new sum()
console.log( typeof p) //object
2.可以在在构造函数内部去定义对象属性和方法,这样的话就可以去访问到这个对象里面的属性和方法(注意:虽然说内部的方法都一样,调用时也都一样,但是new的实例不同,比较就是false)
function sum(){
this.name="黎明",
this.age = 12,
this.getname=function(){
return this.name
}
}
var p1 = new sum()
var p = new sum()
console.log(p1.getname()===p.getname) //false
console.log(p) //sum {name: "黎明", age: 12}
console.log(p.getname()) //黎明
3.将方法添加到类的原型上,以便于复用,也就是说我们将方法放在类的原型上,就可以实现无论创建多少个new过的对象,这些方法都是共享的,不用再创建一个函数。
function sum(){
this.name="黎明",
this.age = 12,
this.getname=function(){
return this.name
}
}
var p = new sum()
var p2 = new sum()
sum.prototype.getname=function(){
return this.name
}
console.log(p.getname())//黎明
console.log(p.getname()===p2.getname()) //true
4.ES5继承
- 原型链继承:
原型链继承简单来说就是父类的实例=子类的原型
//父类
function sum() {
this.name = "黎明",
this.age = 12,
this.getname = function () {
return this.name
}
}
//子类
function child() {
this.name = "北京"
}
//原型链继承
child.prototype = new sum()
var o = new child()
console.log(o.name) //北京
console.log(o.age) //12
- 构造函数集成
由于原型链继承不能传参所以我们就可以用到构造函数继承
//父类
function sum(name,age) {
this.name=name
this.age = age
this.getname = function () {
return this.name
}
}
sum.prototype.getname=function(){
return this.name
}
//子类
function child(name,age) {
sum.call(this,name,age)
}
//原型链继承
// child.prototype = new sum()
var o = new child("王五",20)
console.log(o.name) //王五
console.log(o.age) //20
- 结合继承
由于原型链继承不能继承父类的原型上的方法所以我们使用结合继承
//父类
function sum(name,age) {
this.name=name
this.age = age
// this.getname = function () {
// return this.name
// }
}
sum.prototype.getname=function(){
return this.name
}
//子类
function child(name,age) {
sum.call(this,name,age)
}
//原型链继承
child.prototype = new sum()
var o = new child("王五",20)
console.log(o.name) //王五
console.log(o.getname()) //王五
console.log(o.age) //20
$$$$$下面我们来说一下使用ES6来定义一个类
1.通过constructor定义实例化的属性,就不需要写多个原型,比较简洁
class sum{
constructor(){
this.name="黎明",
this.age = 12
}
getname(){
return this.name
}
}
var p2 = new sum()
var p = new sum()
console.log(p2.getname()===p.getname()) //true
console.log(p2.getname()) //黎明
2.ES6类不仅可以去定义和使用,还可以去继承类
class sum{
constructor(){
this.name="黎明",
this.age = 12
}
getname(){
return this.name
}
}
var p2 = new sum()
//子类
class child extends sum{
constructor(name,age){
super(name,age)
}
}
var p = new child("小柒",22)在这里插入图片描述
console.log(p)
console.log(p.getname())
console.log(p.__proto__)
console.log(p2)
console.log(child.prototype.__proto__.constructor)
原型链
(注意:在当前实例化属性中查找有没有,没有则通过__proto__查找父类的原型父类原型有则执行,没有则在通过__proto__再往上查找,查父类的父类的原型以此类推…走到查找到null,即为原型链的最顶端)