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 ...
随机推荐
- 微信小程序开发07-列表页面怎么做
接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...
- Asp.Net Core 轻松学-HttpClient的演进和避坑
前言 在 Asp.Net Core 1.0 时代,由于设计上的问题, HttpClient 给开发者带来了无尽的困扰,用 Asp.Net Core 开发团队的话来说就是:我们注意到,HttpC ...
- C#开发——网站应用微信登录开发
1. 在微信开放平台注册开发者账号,并有一个审核已通过的网站应用,并获得相对应的AppID和AppSecret,申请通过登陆后,方可开始接入流程. 2.微信OAuth2.0授权登录目前支持author ...
- 类和对象,以及 LeetCode 每日一题
所有类都是引用类型. 1 定义类 类是某一批对象的抽象. 1.1 定义类的语法: [修饰符] class 类名{ 零到多个构造器定义 零到多个成员变量 零到多个方法 } 对于一个类定义而言,可以包含三 ...
- [转]当CPU飙高时,它在做什么
在开发过程中,有时候我们发现JVM占用的CPU居高不下,跟我们的预期不符,这时,CPU在做什么呢?是什么线程让CPU如此忙碌呢?我们通过如下几步,可以查看CPU在执行什么线程. 1.查找jvm进程ID ...
- npm ERR! asyncWrite is not a function
1.背景:原先node是官网下载安装的,通过brew更新了下,然后到项目里npm i 安装包时候,报错2.解决:卸载官网下载安装的node,重装 sudo rm -rf /usr/local/{bin ...
- vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
- loj#6041. 「雅礼集训 2017 Day7」事情的相似度(SAM set启发式合并 二维数点)
题意 题目链接 Sol 只会后缀数组+暴躁莫队套set\(n \sqrt{n} \log n\)但绝对跑不过去. 正解是SAM + set启发式合并 + 二维数点/ SAM + LCT 但是我只会第一 ...
- ext整合highcharts实现饼图
extjs自身有图表的功能,但是与highcharts和echarts相比,ext不如它们功能强大.样式美观. 公司项目的前端框架使用的是ext,所以就有了ext整合第三方图表插件的需求. 笔者会一点 ...
- 关闭windows系统的危险端口,命令行
防火墙启用,增加禁用端口提供给外部访问 @echo off color E2 title 关闭常见的危险端口 echo 正在开启Windows防火墙 echo. netsh advfirewall s ...