当前位置：首页 > news >正文

js的继承的方式

news 2025/7/21 1:44:48

1.对象冒充继承
使用 bind,call,apply 解决构造函数属性的继承
缺点:不能继承原型上的属性和方法

  //-------------父类-------------function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;}Person.prototype.run = function () {console.log(`我${this.name},爱跑步!`);}//-------------子类-------------function Student(sNo, name, age, sex) {//对象的冒充// bind,call,applyPerson.call(this, name, age, sex);//后面this.sNo = sNo;}var s1 = new Student(10001, "刘德华", 20, "男");console.log(s1);s1.run()

2.原型链继承
缺点:不能让构造函数的属性,初始化

   //-------------父类-------------function Person(name, age) {this.name = name;this.age = age;}Person.prototype.name = "刘德海";Person.prototype.run = function () {alert(123);}//-------------子类-------------function Student() {}//我只实现了原型继承,构造函数内部的属性,是无法设置初始值Student.prototype = new Person();var s2 = new Student();console.log(s2);// s2.run()console.log(s2.address);

3.组合继承(对象冒充+原型链继承)
缺点:原型中会有多余的属性,并且是undefined

   //-------------父类-------------function Person(name, age) {this.name = name;this.age = age;}Person.prototype.name = "刘德海";Person.prototype.run = function () {alert(123);}//-------------子类-------------function Student() {}//我只实现了原型继承,构造函数内部的属性,是无法设置初始值Student.prototype = new Person();var s2 = new Student();console.log(s2);// s2.run()console.log(s2.address);

4.寄生组合继承
寄生继承+对象冒充继承=寄生组合继承
寄生组合继承 Object.create(base.prototype);

   // 寄生继承,解决原型问题// 寄生继承+对象冒充继承=寄生组合继承function inherit_proto(base, child) {// 1.创建父类原型,根据父类的原型,创建一个新的对象var basePrototype = Object.create(base.prototype);// 2.创建的原型对象,它的构造还是指向原来的构造函数// 我们就修改子类的构造器basePrototype.constructor = child// 3.让自己拥有父类的原型child.prototype = basePrototypeconsole.log(basePrototype);}// 父类function Person(name, age, sex) {this.name = namethis.age = agethis.sex = sex}Person.prototype.sayHi = function () { }// 子类function Student(sNo, name, age, sex) {Person.call(this, name, age, sex)this.sNo = sNo}// 调用方法inherit_proto(Person, Student)var stu = new Student("1001", "小易", 22, "女")console.log(stu);

5.ES6的类+extends继承

  class Person {constructor(name, age) {this.name = namethis.age = age}run(){return  `跑步`}}class Student extends Person {constructor(name, age, sex) {super(name, age)this.sex = sex}// 重写:子类重写父类的方法run(){return  `哈哈哈哈哈哈或`}}var p=new Student("小易",22,"女")console.log(p.run());console.log(p);