继承学习总结
时间:2021-09-03
本文章向大家介绍继承学习总结,主要包括继承学习总结使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
继承
1.原型链继承:
让子类的原型对象指向父类的实例,当子类的实例找不到对应的方法时,就按原型链往上找。
function Parent(){
this.name = ["原型链继承"];
}
// 原型上挂载方法
Parent.prototype.getName = function(){
console.log(this.name);
}
function Chind(){
}
// 原型链继承
Chind.prototype = new Parent();
//原型链继承会改变constructor指向,要设置重新指回
Chind.prototype.constructor = Chind;
let myChild1 = new Chind();
let myChild2 = new Chind();
myChild1.name[0] = "咕咕咕";
console.log(myChild1.name); //["咕咕咕"]
myChild2.getName(); //["咕咕咕"]
弊端:
- 原型都指向同一个Parent实例,当有两个子类实例化对象时,其中一个修改了Parent的内容,那么另一个实例也会受到影响。
- 原型链继承会改变
constructor
指向,要设置重新指回- 无法对父类进行
super
传参。
2.构造函数继承:
在子类的构造函数中,去执行父类的构造函数,并绑定子类的this
。
// 构造方法继承
function Parent(name){
this.name =name;
}
// 原型上挂载方法
Parent.prototype.getName = function(){
console.log(this.name);
}
function Chind(){
Parent.call(this,"fct");
}
let myChild1 = new Chind();
let myChild2 = new Chind();
myChild1.name = "咕咕咕";
console.log(myChild1.name); //"咕咕咕"
console.log(myChild2.name); // fct
myChild2.getName(); //报错,构造方法继承不能继承父类原型上的属性和方法
弊端:
构造方法继承解决了子类实例都指向同一个父类实例,但构造方法继承不能继承父类原型上的属性和方法
3.组合继承
组合继承 = 构造函数继承 + 原型链继承
// ----组合继承-----
function Parent(name){
this.name = name;
}
Parent.prototype.getName = function (){
console.log(this.name);
}
function Child(){
Parent.call(this,"小桃子");
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
let myChild1 = new Child();
let myChild2 = new Child();
myChild1.name = "咕咕咕";
console.log(myChild1.name); // 咕咕咕
console.log(myChild2.name); // 小桃子
myChild2.getName(); // 小桃子
缺点:每生成一个子类实例就得new 一个父类实例和执行一次call函数。导致父类构造函数始终会被调用两次。
4. 寄生式继承
function Parent(name){
this.name = [name];
}
Parent.prototype.getName = function (){
console.log(this.name);
}
function Child(){
Parent.call(this,"水云身");
}
Child.prototype = Parent.prototype;
Child.prototype.constructor = Child;
Child.prototype.print = function (){
console.log("我是child");
}
let myChild1 = new Child();
let myChild2 = new Child();
myChild1.name[0] = "咕咕咕";
console.log(myChild1.name); // 咕咕咕
console.log(myChild2.name); // 水云身
myChild2.getName(); // 水云身
myChild1.print(); //我是child
let myParent = new Parent();
myParent.print(); //我是child
缺点:避免了父类构造函数始终被调用两次,但子类对原型上的修改会影响(污染)父类的原型。
5.寄生式组合继承
基本思路:不通过调用父类构造函数给子类原型赋值,而是取得父类原型的一个副本。
function Parent(name){
this.name = name;
}
Parent.prototype.getName = function (){
console.log(this.name);
}
function Child(){
Parent.call(this,"卿云");
}
//子类原型 = 父类原型的一个副本
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.print = function (){
console.log("我是child");
}
let myChild1 = new Child();
let myChild2 = new Child();
let myParent = new Parent();
myChild1.name = "咕咕咕";
console.log(myChild1.name); // 咕咕咕
console.log(myChild2.name); // 卿云
myChild2.getName(); // 卿云
myParent.getName(); //undefined
myChild1.print(); //我是child
myParent.print(); //报错:myParent.print is not a function
子类原型上的修改不会影响到父类原型。寄生式组合继承算是继承的最佳模式
人生人山人海人来人往,自己自尊自爱自由自在。
本文来自博客园,作者:青柠i,转载请注明原文链接:https://www.cnblogs.com/fuct/p/15223187.html
原文地址:https://www.cnblogs.com/fuct/p/15223187.html
- 在Clion的IDE中指定命令行参数
- CentOS6 安装并破解Jira 7
- Martin Odersky访谈录所思
- 解决Boost库链接出错问题
- 引入Option优雅地保证健壮性
- java正则校验,密码必须由字母和数字组成
- Spring Boot集成JasperReports生成PDF文档
- Redux框架reducer对状态的处理
- 使用Spring Cloud Security OAuth2搭建授权服务
- Nginx性能优化
- linux 如何正确的关闭mongodb
- 运用Aggregator模式实现MapReduce
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- spring boot项目在外部tomcat环境下部署
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法