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 ...
随机推荐
- SpringBoot + Spring Security 学习笔记(一)自定义基本使用及个性化登录配置
官方文档参考,5.1.2 中文参考文档,4.1 中文参考文档,4.1 官方文档中文翻译与源码解读 SpringSecurity 核心功能: 认证(你是谁) 授权(你能干什么) 攻击防护(防止伪造身份) ...
- Spring Boot使用Spring Data Jpa对MySQL数据库进行CRUD操作
只需两步!Eclipse+Maven快速构建第一个Spring Boot项目 构建了第一个Spring Boot项目. Spring Boot连接MySQL数据库 连接了MySQL数据库. 本文在之前 ...
- JMeter主要组件介绍
JMeter主要组件介绍 转自https://www.cnblogs.com/linbo3168/p/6023962.html 作者:linbo.yang 1.测试计划(Test Plan)是使用 ...
- 使用Aspose.Words将Word文档转换为Tiff格式图片文件
用Aspose组件的优点是操作Word文档不需要安装Office就可以实现. 首先需要引用Aspose.Words.dll,链接地址:链接:https://pan.baidu.com/s/1rJvjp ...
- c# 构造tree下拉框,空格转化
c#代码写的空格如何在html中的select中展示出来呢? var str = ""; //父级菜单不缩进 ; j < i; j++) { str += HttpUtili ...
- mysql存储过程 带参数 插入 操作
今天再次添补一下小小内容,闲话不多说,直入标题. 先来看下,如何创建带参数的 存储过程(ps:本文只限mysql5及以上版本) CREATE PROCEDURE prSaveFileInfo(Tabl ...
- 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less
写在前面乱七八糟的前言: emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自 ...
- MongoDB学习(查找文档和其他数据查找操作)
理解Cursor对象和查询运算符 cursor对象 cursor对象相当于一个指针,可通过迭代它来访问MongdoDB数据库中的一组对象. 在使用 find() 方法查询时,返回的并非实际文档,而是一 ...
- Snapde和Excel、PowerPivot、WPS打开超大CSV文件性能比较
Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏. 我们拿四份文件进行测试,对比一下他们打开大文件的性能:loan_theme_ids.c ...
- Android Studio教程06-布局,监听器以及基本控件
目录 2. 监听器 3. 布局 3.1. 布局分类 (1). Linear Layout (2). Relative Layout (3). ListView (4). Grid View 4. 其他 ...