继承学习之类式继承、构造函数式继承、组合继承代码实例
程序员文章站
2022-06-21 22:25:43
继承: 指的是子类继承父类的属性和方法。
子类是父类的实例
子类继承父类的属性和方法,可以使用父类的属性和方法,又不影响父类原型上的方法
父类不能使用子类独有的属性和方法...
继承: 指的是子类继承父类的属性和方法。
子类是父类的实例
子类继承父类的属性和方法,可以使用父类的属性和方法,又不影响父类原型上的方法
父类不能使用子类独有的属性和方法
继承方式:
①类式继承 或者 原型式继承
②构造函数式继承
③组合式继承
1. instanceof
该关键字用于判定某一个对象是否是某一个构造函数的实例
使用方式:
对象instanceof构造函数
2. 类式继承 或者 原型式继承(用于继承方法)
类式继承:也叫做原型式继承。 将子类的原型指向父类的实例。
真正意义上的继承:
子类继承了父类,子类是子类构造函数的实例,子类也是父类构造函数的实例,子类可以使用父类的方法并且不影响父类的方法 ,父类不可以使用子类的方法
注意:
①类式继承 或者 原型式继承的弊端:
这种继承会丢失原来的子类原型的constructor属性,而原来的子类原型上是有一个constructor属性的。要记得补回。
② 子类的新的方法的赋值语句一定要写在原型式继承代码的下方。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <script type="text/javascript"> // 父类 // function people(name, age, sex) { // this.name = name; // this.age = age; // this.sex = sex // } // // 父类的方法 // people.prototype.sayhello = function() { // console.log("我的名字叫做" + this.name) // } // // 子类 // function student(name, age, sex, grade) { // this.name = name; // this.age= age; // this.sex = sex; // this.grade = grade; // } // // 所谓继承, 就是应该是子类从父类的上面得到一些东西。 // // 现在我们想让子类调用父类的方法,我们能想到最简单的方法就是让子类的原型指向父类的原型。 // // 尝试1: // student.prototype = people.prototype; // // 既然是子类, 就应该拥有和父类不一样的方法。 // // 给子类添加方法 // student.prototype.intro = function() { // console.log("我的年纪" + this.age +"了"); // } // // 实例化 // var people = new people("小明", 25, "男"); // var student = new student("小红", 12, "女", 6); // // 测试子类是够能够调用父类的方法 // // student.sayhello(); // // 测试父类能否调用子类的方法 // people.sayhello(); // people.intro(); // 经过测试, 子类确实可以访问父类的方法了, 但是父类同时也可以调用子类的方法。 // 我们现在迫切需要一种方法, 既可以让子类继承父类的方法, 又不影响父类原型上的方法。 /***************************************************************************/ function people(name, age, sex) { this.name = name; this.age = age; this.sex = sex } // 父类的方法 people.prototype.sayhello = function() { console.log("我的名字叫做" + this.name) } // 子类 function student(name, age, sex, grade) { this.name = name; this.age= age; this.sex = sex; this.grade = grade; } student.prototype = new people(); // student.prototype = { // constructor: student // } // 此时, student的constructor 属性丢失。 // 继承之后,要记得手工补回原有的constructor 属性,并且给student添加的新方法要写在此条代码的后面。 student.prototype.constructor = student; // 给子类添加方法 student.prototype.intro = function() { console.log("我的年纪" + this.age +"了"); } // 现在我们不能让子类的原型指向父类的原型了 // 现在我们想到 让子类的原型指向父类的实例,这个方法符合我们的要求。 var people = new people("小明", 25, "男"); var student = new student("小红", 12, "女", 6); // 测试子类是否继承了父类的方法 // student.sayhello(); // 测试父类能否使用子类的方法 // people.intro(); // 最后测试, 是否是继承了父类 console.log(student instanceof student); console.log(student instanceof people); </script> </body> </html>
向原型对象添加多种方法:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <script type="text/javascript"> // 父类 function people(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } // 添加一种方法 people.prototype.sayhello = function() { } // 添加10种方法 people.prototype = { // 记得手工补回constructor 属性。 constructor: people, say: function() { }, hehe: function() { }, haha: function() { } } </script> </body> </html>
3. 构造函数式继承(用于继承属性)
在子类的构造函数中,调用父类的构造函数并使用apply将父类构造函数的this指向子类的this,并将arguments传递进去。
注意:所有的子类特有属性赋值语句都要放在构造函数继承代码的下面。
构造函数式继承:
子类并不是父类的实例,子类可以继承父类的属性
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <script type="text/javascript"> // 之前我们讲的是继承了父类的方法, 这种“子类的原型指向父类的实例的继承方式” 叫做类式继承或者原型式继承。 // 我们将如何继承属性 // 父类 function people(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } // 子类 function student(name, age, sex, grade) { // var arr = [].slice.call(arguments); people.apply(this, arguments); this.grade = grade; } var s = new student("小明", 12, "男", 6) console.log(s) console.log(s instanceof people); // 每个函数都有一个prototype属性, 它是一个对象, 对象里面有一个constructor 属性 指向构造函数本身 // console.log(student.prototype) </script> </body> </html>
4. 组合继承(继承属性和方法)
构造函数式继承 + 类式继承/原型式继承
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <script type="text/javascript"> // 父类 function people(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } // 子类 function student(name, age, sex, grade) { // var arr = [].slice.call(arguments); people.apply(this, arguments); this.grade = grade; } // student.prototype = { // constructor: student // } // 此时, student的constructor 属性丢失。 student.prototype = new people(); // 我们可以手动补回 student.prototype.constructor = student; // 继承之后, 要记得手工补回原有的constructor 属性,并且给student添加的新方法要写在此条代码的后面。 var s = new student("小明", 12, "男", 6) console.log(s.constructor) </script> </body> </html>
上一篇: 平板支撑的减肥方法 效果有多好
下一篇: 四棱豆孕妇能吃吗
推荐阅读
-
继承学习之类式继承、构造函数式继承、组合继承代码实例
-
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)_javascript技巧
-
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)_javascript技巧
-
JavaScript继承之原型式继承、寄生式继承、寄生组合式继承用法实例详解
-
JavaScript继承之原型式继承、寄生式继承、寄生组合式继承用法实例详解
-
对于JS继承详细介绍( 原型链,构造函数,组合,原型式,寄生式,寄生组合,Class extends)
-
继承学习之类式继承、构造函数式继承、组合继承代码实例
-
对于JS继承详细介绍( 原型链,构造函数,组合,原型式,寄生式,寄生组合,Class extends)