JavaScript继承总结
1.创建对象
1.字面量对象
2.构造函数
3.Object.create
//1.字面量
var obj={
name: '字面量',
show: function(){
console.log(this.name)
}
}
//2.构造函数
function fun (name) {
this.name=name
}
var obj=new fun('obj')
//3.Object.create
var obj={name: 'obj'}
var obj=Object.create(obj)
2.JavaScript继承
1.原型链继承
function Parent(name){
this.name=name
this.sleep=function(){
console.log(this.name + '在睡觉')
}
}
Parent.prototype.eat=function(food){
console.log(this.name + '正在吃' + food)
}
function Child(){}
Child.prototype=new Parent('Child')
Child.prototype.constructor=Child
var child=new Child()
Child.prototype=new Parent('Child')就是把Parent实例赋值给Child.prototype,也就是说new Child().__proto__===new Parent('Child')。
可以通过Child.prototype在原型对象上增加新的属性或方法,也可以通过,child.__proto__在原型对象上添加新的方法和属性。
缺点:
1.原型对象上的属性和方法是所有实例都可访问的,而且一个实例改变了原型上的方法和属性都会影响到其他实例。
2.创建子类实例时,无法向父类构造函数传参。
2.构造函数继承
function Parent(name){
this.name=name
this.sleep=function(){
console.log(this.name + '在睡觉')
}
}
Parent.prototype.eat=function(food){
console.log(this.name + '正在吃' + food)
}
function Child(){
Parent.call(this,'child')
}
Child.prototype.eyes=function(){console.log('eyes')}
var child=new Child()
构造函数继承可以通过call或apply方法实现继承。这种方法不能继承原型对象中的属性和方法,只能继承实例属性和实例方法,但是可以向父类传参。
3.组合继承
function Parent(name){
this.name=name
this.sleep=function(){
console.log(this.name + '正在睡觉')
}
}
Parent.prototype.eat=function(food){
console.log(this.name + '正在吃' + food)
}
function Child(){
Parent.call(this,'child')
}
Child.prototype.eyes=function(){console.log('eyes')}
Child.prototype=new Parent()
Child.prototype.constructor=Child
var child=new Child()
组合继承是比较好的继承, 他是原型链继承和构造函数继承的结合, 合理的利用了这两种组合的特点,既是子类的实例,也是父类的实例, 但有一个缺点就是调用了两次构造函数。
4.组合继承优化
function Parent(name){
this.name=name
this.sleep=function(){
console.log(this.name + '正在睡觉')
}
}
Parent.prototype.eat=function(food){
console.log(this.name + '正在吃' + food)
}
function Child(){
Parent.call(this,'child')
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor=Child
var child=new Child()
5.寄生组合继承
function Parent(name){
this.name=name
this.sleep=function(){
console.log(this.name + '正在睡觉')
}
}
Parent.prototype.eat=function(food){
console.log(this.name + '正在吃' + food)
}
function Child(){
Parent.call(this,'child')
}
function f(){}
f.prototype=Parent.prototype
Child.prototype=new f()
Child.prototype.constructor=Child
var child=new Child()
只调用一次父类的构造函数,避免了在子类原型上创建不必要的,多余的属性。
JavaScript继承总结的更多相关文章
- javascript继承的三种模式
javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...
- javascript继承机制的设计思想(ryf)
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- 【读书笔记】javascript 继承
在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...
- 图解JavaScript 继承
JavaScript作为一个面向对象语言,可以实现继承是必不可少的,但是由于本身并没有类的概念(不知道这样说是否严谨,但在js中一切都类皆是对象模拟)所以在JavaScript中的继承也区别于其他的面 ...
- JavaScript强化教程——Cocos2d-JS中JavaScript继承
javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...
- [原创]JavaScript继承详解
原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...
- javascript继承(六)—实现多继承
在上一篇javascript继承—prototype最优两种继承(空函数和循环拷贝)(3) ,介绍了js较完美继承的两种实现方案,那么下面来探讨一下js里是否有多继承,如何实现多继承.在这里可以看看j ...
- javascript继承(五)—prototype最优两种继承(空函数和循环拷贝)
一.利用空函数实现继承 参考了文章javascript继承—prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...
- javascript继承(四)—prototype属性介绍
js里每一个function都有一个prototype属性,而每一个实例都有constructor属性,并且每一个function的prototype都有一个constructor属性,这个属性会指向 ...
- 【JavaScript】重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
随机推荐
- Spring Boot 2.x(十一):AOP实战--打印接口日志
接口日志有啥用 在我们日常的开发过程中,我们可以通过接口日志去查看这个接口的一些详细信息.比如客户端的IP,客户端的类型,响应的时间,请求的类型,请求的接口方法等等,我们可以对这些数据进行统计分析,提 ...
- Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信(二)
前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...
- DSAPI 字符串和文件转Md5字符串
方法列表: 字符串转MD5字符串(ByVal 要转换的字符串 As String, Optional 转换格式 As MD5格式 = MD5格式.小写32位) As String 文件转MD5字符串( ...
- 前端_Bootstrap简单使用
首先说一下简单使用方法: 1.首先上官网下载Bootstrap(就是一些js文件和一些css文件) ,网址: https://v3.bootcss.com/getting-started/#downl ...
- maven的安装和环境配置
一.下载maven Apache Maven下载地址:http://maven.apache.org/download.cgi 二.maven的安装 将下载好的安装文件解压到d盘根目录下即可(当然,这 ...
- java基础(一):谈谈java内存管理与垃圾回收机制
看了很多java内存管理的文章或者博客,写的要么笼统,要么划分的不正确,且很多文章都千篇一律.例如部分地方将jvm笼统的分为堆.栈.程序计数器,这么分太过于笼统,无法清晰的阐述java的内存管理模型: ...
- Python数据描述与分析
在进行数据分析之前,我们需要做的事情是对数据有初步的了解,比如对数据本身的敏感程度,通俗来说就是对数据的分布有大概的理解,此时我们需要工具进行数据的描述,观测数据的形状等:而后才是对数据进行建模分析, ...
- Fragment生命周期以及使用时的小问题
前言- 昨天在写UI的时候用到了FRAGMENT,发现自己对此还不是非常了解,借此机会记录一下 Fragment的生命周期- 官方生命周期图: Fragment每个生命周期方法的意义.作用- onVi ...
- Python开发者现实版养成路线:从一无所知到无所不知
初级开发者学Python容易陷入茫然,面对市面上种类众多的编程语言和框架,重要的是坚持自己的选择,宜精不宜杂.本文是一篇指路文,概述了从编程基础.引导.文档阅读.书籍和视频.源代码等学习和积累环节,值 ...
- js判断浏览器是否支持webGL
起因是我之前开发的网页,用到了three.js制作了一个3d的旋转球体效果. 在各种浏览器上运行都没问题,在IE上也做了兼容代码. 但是今天接电话,老板说你这网页在xp上不显示啊.IE上好使.goog ...