ES5中的类

2021-11-10 10:03:51 阅读：146 来源： 互联网

标签：function ES5 console log Person new Man

1.简单示例

function Person(){
  this.name = "lily"
}
let p = new Person()
console.log(p.name);

2.构造函数和原型链里面增加方法

原型链上的属性会被多个实例共享，构造函数不会？？

function Person(str){
  this.name = "lily"
  this.sleep = function(){
    return `${this.name}在睡觉`
  }
}
let p = new Person()
console.log(p.sleep());

Person.prototype.age = 18
Person.prototype.run = function(){
  return `${this.name}在跑步`
}

console.log(p.age);
console.log(p.run());

3.给类添加静态方法

上面Person类中的那个sleep方法是实例方法，需要实例化对象才能够调用

Person.say = function(){   //静态方法不需要实例化，直接通过类调用
  console.log("hello");
}

Person.say()

静态方法使用场景？？

4.ES5里的继承

4.1对象冒充实现继承

对象冒充可以继承构造函数里的属性和方法，但是不能继承原型链上的属性和方法

//对象冒充实现继承
function Man(){
  Person.call(this)  //call改变this指向，让本该指向Man类的this改为指向Person的this，然后盗取这个Person的this，获取Person的属性和方法
  //call把Man的this指向Person，Person的this不能访问Person的原型链，所以Man也不能
}

let m = new Man()
console.log(m.name);
console.log(m.age);
console.log(m.sleep());

4.2原型链实现继承

原型链实现继承可以可以同时继承构造函数和原型链的属性和方法。

function Man(){
}
Man.prototype = new Person()
let m = new Man()
console.log(m.name);
console.log(m.age);
console.log(m.sleep());
console.log(m.run());

原型链实现继承的问题：
原型链实现继承，实例化子类的时候没法给父类传参

对象冒充继承实例化子类的时候可以给父类传参
function Man(str){
   Person.call(this,str)
}
let m = new Man("jicheng")
console.log(m.name);
console.log(m.sleep());

4.3原型链+构造函数的组合继承模式

第一种

function Man(str){
  Person.call(this,str)
}
Man.prototype = new Person()
let m = new Man("jicheng")
console.log(m.name);
console.log(m.age);
console.log(m.sleep());
console.log(m.run());

第二种,对象冒充已经继承了构造函数的属性和方法，所以原型链继承只需要继承父类的原型链

function Man(str){
  Person.call(this,str)
}
Man.prototype = Person.prototype
let m = new Man("jicheng")

标签：function,ES5,console,log,Person,new,Man
来源： https://blog.csdn.net/qq_39706777/article/details/121000572

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9