Javascript的原型继承,说清楚
时间:2022-04-22
本文章向大家介绍Javascript的原型继承,说清楚,主要内容包括一、第一段代码:、二、第二段代码:、三、运行结果:、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
一直以来对Javascript的原型、原型链、继承等东西都只是会用和了解,但没有深入去理解这门语言关于继承这方面的本质和特点。闲暇之余做的理解和总结,欢迎各位朋友一起讨论。
本文本主要从两段代码的区别说明继承:
一、第一段代码:
function Parent(){
this.Name='parent';
}
Parent.prototype.getName = function(){
return this.Name;
}
Parent.prototype.Share = ["Share"];
function Child(){
Parent.call(this)
this.Age = 'Age'
}
Child.prototype = Parent.prototype; //原型继承
var _child = new Child();
var _parent = new Parent();
Parent.prototype.Foo = "Foo";
_parent.Share.push('second');
console.log(_child.Share);
console.log("_child instanceof Child: " + ( _child instanceof Child ));
console.log("_child instanceof Parent: " + ( _child instanceof Parent));
console.log("Child.prototype.isPrototypeOf(_child): " + Child.prototype.isPrototypeOf(_child));
console.log("Parent.prototype.isPrototypeOf(_child): " + Parent.prototype.isPrototypeOf(_child));
console.log("_child.hasOwnProperty('Share'): " + _child.hasOwnProperty('Share'));
console.log("_parent.hasOwnProperty('Share'): " + _parent.hasOwnProperty('Share'));
console.log("_child.hasOwnProperty('Name'): " + _child.hasOwnProperty('Name'));
console.log("_parent.hasOwnProperty('Name'): " + _parent.hasOwnProperty('Name'));
二、第二段代码:
function Parent(){
this.Name='parent';
}
Parent.prototype.getName = function(){
return this.Name;
}
Parent.prototype.Share = ["Share"];
function Child(){
Parent.call(this)
this.Age = 'Age'
}
function Inher(supers, childs) {
function F(){}
F.prototype = supers.prototype;
F.prototype.constructor = childs;
return new F();
}
Child.prototype = Inher(Parent,Child); //原型对象继承
var _child = new Child();
var _parent = new Parent();
_parent.Share.push('second');
Parent.prototype.Foo = "Foo";
console.log(_child.Share);
console.log("_child instanceof Child: " + (_child instanceof Child));
console.log("_child instanceof Parent: " + (_child instanceof Parent));
console.log("Child.prototype.isPrototypeOf(_child): " + Child.prototype.isPrototypeOf(_child));
console.log("Parent.prototype.isPrototypeOf(_child): " + Parent.prototype.isPrototypeOf(_child));
console.log("_child.hasOwnProperty('Share'): " + _child.hasOwnProperty('Share'));
console.log("_parent.hasOwnProperty('Share'): " + _parent.hasOwnProperty('Share'));
console.log("_child.hasOwnProperty('Name'): " + _child.hasOwnProperty('Name'));
console.log("_parent.hasOwnProperty('Name'): " + _parent.hasOwnProperty('Name'));
三、运行结果:
从结果可以看出两段代码的运行结果是一致的。
- 对象是否是父类、子类的实例判断都是一致的
- 父类、子类都是在对象的原型链上
- prototype(原型)上的属性通过hasOwnProperty判断是false
- 通过构造函数创建的属性,可以通过HasOwnProperty决断为true的
不同之处:
- 代码不同之处在于:第一段代码Child.prototype是直接被赋值为Parent.prototype的,而第二段代码Child.prototype被赋值为一个Parent的实例对象
- 上图说明:左侧为第一段代码;右侧为第二段
- 从上图可以看出第一段代码的原型链只有两层,也就是Child和Parent共用一层原型链,第二段代码的原型链有三层,Child、Parent、Object。如果是多级继承,第一段代码的模式原始链始终只有两层,而第二段代码的模式原型会有层级关系。
- 原因:function被实例化时,先创建一个对象,然后复制function的构造器的prototype属性上的所有内容到__proto__(后续的原型链),如果复制是一个对象,这个对象也有自己的原型链(proto),所以原型链就形成了。如果子类的prototype指向父类的prototype,这样prototype处于共存状态则原型链不清晰。
- 重点区别(第二天的理解)!!: 第一段代码在子类的prototype(原型)上增加的方法或者属性会直接影响到父类;而第二段代码的则不会。
- 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 数组属性和方法
- docker浅入深出4
- BFE.dev前端刷题#58. 获取DOM tree高度
- 如何在Tungsten Fabric上整合裸金属服务器(附配置验证过程)
- 逐行阅读Spring5.X源码(三) BeanDefinition的实现类详解,拔高
- 逐行阅读Spring5.X源码(番外篇)BeanDefinition到底有多重要
- 逐行阅读Spring5.X源码(番外篇)AnnotatedBeanDefinitionReader的作用
- 逐行阅读Spring5.X源码(四) BeanFactory——核心容器bean工厂
- 逐行阅读Spring5.X源码(五) 初探BeanFactoryPostProcessor后置处理器,难,特别难。
- 逐行阅读Spring5.X源码(六) ClassPathBeanDefinitionScanner扫描器
- 逐行阅读Spring5.X源码(番外篇)自定义扫描器, Mybatis是如何利用spring完成Mapper扫描的
- 逐行阅读Spring5.X源码(七)扫描和注册神器 ConfigurationClassPostProcessor ,学此类者,胜过学九阳神功!胆小勿入!
- 「Mysql索引原理(三)」Mysql中的Hash索引原理
- RNN、lstm、gru详解
- 「Mysql索引原理(四)」单列索引
- 「Mysql索引原理(五)」多列索引