码迷,mamicode.com
首页 > 其他好文 > 详细

es5 的类和继承

时间:2020-07-15 23:02:38      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:his   font   组合   run   方法   函数   get   直接   静态   

创建一个简单的类

 

创建对象(构造函数  + newfunction cityName (name,age) {
  this.name = name;  //属性
  this.age = age;
 this.run =function(){  //实例方法
   alert(‘run方法‘)
 }
}
cityName.getInfo = function(){     //静态方法
   console.log(‘静态方法) 
}
cityName.prototype.about = function () {
  console.log(`name:${this.name},age:${this.age}`)
}
//创建对象     对象cn1和cn2共享cityName.prototype原型属性
let cn1 = new cityName(‘城市‘,2020); console.log(cn1.name) cn1.about() 
let cn2 = new cityName(‘城市‘,2020);
console.log(cn2.name)
cn2.about()
//静态方法的调用 
cityName.getInfo()

 

 

 

继承

首先先创建一个类

function Person () {
  this.name = ‘张三‘;
  this.age = 18;
  this.run = function () {
    alert(this.name + ‘在运动‘)
  }
}
Person.prototype.work = function () {
  alert(this.name + ‘在工作‘)
}

 

1、对象冒充继承模式   

对象冒充可以继承构造函数里面的属性和方法,但是不可以继承原型链上面的属性和方法
function Web () {
  Person.call(this);   /*对象冒充实现继承*/
}

let a = new Web();
a.run()   /*对象冒充可以继承构造函数里面的属性和方法*/
a.work()  /*对象冒充可以继承构造函数里面的属性和方法,但是不可以继承原型链上面的属性和方法*/

2、原型链继承模式

原型链继承即可以继承构造函数里面的属性和方法,也可以继承原型链上面的属性和方法,但是实例化子类时,没有办法给父类传参
function Web () {

}
Web.prototype = new Person(); /*原型链继承*/

let a = new Web();
/*即可以继承构造函数里面的属性和方法,也可以继承原型链上面的属性和方法*/
a.run()
a.work()

 

3、原型链+对象冒充的组合继承模式

 首先创建一个需要传入参数的类

function City (name,age) {
  this.name = name;
  this.age = age;
  this.run = function () {
    alert(this.name + ‘在运动‘)
  }
}
City.prototype.work = function () {
  alert(this.name + ‘在工作‘)
}

实现原型链+对象组合继承

第一种方法:

function Web (name,age) {
  City.call(this,name,age)
}
Web.prototype = new City();  //继承父类构造函数和原型链上的属性和方法
let a = new Web(‘李雷‘,20);
a.run()
a.work()

第二种方法:

function Web (name,age) {
  City.call(this,name,age)
}
Web.prototype = City.prototype;    //直接继承父类原型链上的方法和属性
let a = new Web(‘李雷‘,20);
a.run()
a.work()

 

es5 的类和继承

标签:his   font   组合   run   方法   函数   get   直接   静态   

原文地址:https://www.cnblogs.com/Li--gm/p/13306484.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!