文档章节

javascript对象---10 继承

奋斗的小芋头
 奋斗的小芋头
发布于 2016/11/28 15:27
字数 1281
阅读 6
收藏 1
点赞 0
评论 0

一、继承的概念

继承是面向对象的重要特征。继承是指子类对象拥有父类对象的属性与方法,同时子类对象可以覆盖扩展父类对象的属性和方法。

JS中继承的特点:

1.子类对象  拥有 父类对象 的 属性和方法; (把构造函数称为一个类,使用构造函数为当前对象初始化属性)

2.子类对象可以有自己的新属性和方法;

3.子类对象可以重写父类对象的方法;

4.JS中并没有专门的继承语法,但可以通过原型链机制实现。

把共有的属性封装在父类,子类继承

继承的优点

1.提供了一种优良的代码组合方式,提高了代码的重用性。

2.子类可以灵活调用父类的属性,同时可以扩展覆盖父类的属性,体现灵活性。

3.提供了代码的可维护性

二、原型继承方式

原型继承方式:通过原型链完成继承。任何对象都会通过原型链继承Oject函数的 prototype对象中的属性和方法

正常声明两个构造函数 ---人类 和学生

//人类 : 性别年龄-说话、跑跳
        //人类中包括学生 --有学校 考试
        //注意父类并不是专门为子类服务的,父类也会有相关的事例
            function Person(name,age){
                this.name = name;
                this.age = age;
            }
            
            Person.prototype.sayHello = function(){
                console.log("名字:" +this.name);
            }
            
            //创建学生构造函数
            function Student( name ,age ,school){
                this.name = name;
                this.age = age;
                this.school = school;
            }
           Student.prototype.gotoSchool=function(){
                console.log("去"+this.school+"上学")
            }

让学生继承人类的  sayhello( ) ;方法 

    function Person(name,age){
                this.name = name;
                this.age = age;
            }
            
            Person.prototype.sayHello = function(){
                console.log("名字:" +this.name);
            }
            
            //创建学生构造函数
            function Student( name ,age ,school){
                this.name = name;
                this.age = age;
                this.school = school;
            }
            //修改了
            Student.prototype = new Person();   //必须在添加方法前面 
            //new  Person 没有创建对象引用他,所以栈内存中没有值
            //Student的原型对象指针指向了 new Person 对象
            
            Student.prototype.gotoSchool=function(){
                console.log("去"+this.school+"上学");
            }
            
            //当前student1具备Person对象里面属性方法---任何Student实例具备 person里的方法
            var student1 = new Student("Shixin",18, "天津理工大学");
            student1.gotoSchool();
            student1.sayHello();

 

Person.prototype.category="哺乳类";

    console.log(student1.category);    //哺乳类
            student1.category = "灵长类";  //
            console.log(student1.category);   //灵长类
            var student2 = new Student("lis",20, "天津理工大学");
            console.log(student2.category);   //哺乳类

//添加设置,返回方法

Person.prototype.setCategory = function( val){
                this.category = val;
            }
            
            person.prototype.getCategory = function(){
                return  this.category;
            }

 

    student1.setCategory("灵长类");    
            console.log(student1.getCategory()); ----------//灵长类
            
            var student2 = new Student("lis",20, "天津理工大学");
             console.log(student2.getCategory()); ----------------//哺乳类

 

缺点:

1.原型对象中数据发生变化,会导致多有对象数据都变化

2.无法向父类·对象·传递参数。

三、构造函数继承方式

通过构造函数完成继承

缺点:只能继承父类构造函数中执行的赋值的属性,无法对原型对象的属性进行继承,因此很少单独使用

//构造函数的应用场景,只能继承基本属性,无法继承方法;
            function Person( name,age){
                this.name = name;
                this.age = age;
            }
            
            //子类
            function Student( name,age,schoolName){
                this.schoolName = schoolName;
                Person.call(this,name,age);    //继承基本属性 ---赋值 name age
            }
            Student.prototype.goToSchool = function(){
                console.log("去"+this.schoolName+"上学");
            }
            
            var st = new Student('张三',18,"理工大学");
            st.goToSchool();

结果:----去理工大学上学

四、混合继承方式

通过构造函数,原型链共同完成继承,使用最多的方案

 function Person( name,age){
                this.name = name;
                this.age = age;
            }
             Person.prototype.sayHello = function(){
                 console.log("我叫"+this.name);
             }
             function Student ( name, age,schoolName){
                 this.schoolName = schoolName;
                 Person.call(this,name,age);    //构造函数继承方式--this值加到 创建的对象上,student

相当于进行了 this.name=name,this.age=age;
             }
             Student.prototype = new Person(); //重置原型链可以使用Person()的方法
             Student.prototype.gotoSchool = function(){
                 console.log("我去"+this.schoolName+"上学");
             }
             var student = new Student("张三",18,"理工大学");
             student.sayHello();
             student.gotoSchool();

我叫张三
我去理工大学上学

缺点: 调用两次Person构造函数 

1次-Student.prototype = new Person(); 只是原型链改变

2次--  Person.call(this,name,age);

为了解决这个弊端采用下种方法

五、寄生组合继承方法 --最优良

寄生组合继承方式:将子对象的prototype 设定为克隆出来的父类的 prototype 对象。最优的解决方案。

通过自己构建一个prototype --- 替换 Student.prototype = new Person();

  Student.prototype = new Person(); // 只需要借用原型链不需要执行代码 

new person()的过程

1.创建内存空间

2.改变this指向

3.原型链指定

4.执行函数体

前3步需要,最后一步不需要

1.  var ob = new Object();

2. ob.constructor = Student;

3 .ob.prototype = Person; 原型链指向Person

为了不打乱原型链 --提出一个公用方法

function inherit( parent, child){ //父亲孩子

}  

 

//寄生组合方式
            function inherit( parent,child){ 
                //创建一个深度克隆 父类 prototype对象  
                var prototype = Object( parent.prototype); //相当于又复制了一个内存空间
                //改变这个protityoe对象的 构造指针constructor指针指向子类的构造函数。
                prototype.constructor = child;
                //修改child的指针
                child.prototype =  prototype
            }

            
            function Person( name,age){
                this.name = name;
                this.age = age;
            }
            Person.prototype.sayHello  = function(){
                Console.log("名字:" +this.name);
            }
            
            function Student(name,age,schoolName){
                this.schoolName = schoolName;
                Person.call(this,name,age);
            }
            
            inherit(Person,Student);
            Student.prototype.gotoSchool = function(){
                console.log("去" + this.schoolName +"上学");
            }

© 著作权归作者所有

共有 人打赏支持
奋斗的小芋头
粉丝 1
博文 161
码字总数 129412
作品 0
大连
JavaScript 中的继承:ES3、ES5 和 ES6

选择一种继承方式 JavaScript 是一门动态语言,动态意味着高灵活性,而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式,可以分成下面四类: Mixin 模式,即属性混入,从一个...

天方夜
07/04
0
0
用通俗易懂的语言介绍JavaScript原型

原型(prototype)是每个JavaScript开发人员必须理解的基本概念,本文的目标是通俗而又详细地解释JavaScript的原型。如果你读完这篇博文以后还是不理解JavaScript的原型,请将你的问题写在下...

gsbhzh
2014/10/29
0
0
由Javascript的继承引发的:抽象类、接口、多态,甚至是类型转换!

工作中需要用到Javascript,关注了Javascript中继承复用的问题,翻阅了网上的各种关于Javascript继承的帖子,感觉大都思考略浅,并没有做过多说明,简单粗暴的告诉你实现Javascript继承有1.2...

xue777hua
2013/07/28
0
11
javascript原型的理解

JavaScript是一门面向对象的语言。在JavaScript中有一句很经典的话,万物皆对象。既然是面向对象的,那就有面向对象的三大特征:封装、继承、多态。这里讲的是JavaScript的继承,其他两个容后...

痴情小云
06/26
0
0
Cocos2d-JS中JavaScript继承

JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来的,在Cocos2d-J...

智捷课堂
2015/03/17
0
0
js中的prototype和构造函数

js中没有类的感念,继承也是通过原型链来实现的对象的继承而不是类的继承 Vjeux写的这篇文章应该能帮助我们更好的理解js中原型的工作方式:http://blog.vjeux.com/2011/javascript/how-proto...

leo-H
2013/04/08
0
0
JavaScript面试大全(二)

eval()是做什么的? [eval()是“魔鬼”][1] null,undefined 的区别? [来看看大神阮一峰的解释吧][2] 写一个通用的事件侦听器函数。 [JS事件监听器][3] Node.js的适用场景? [NodeJS优缺点及...

百变茄
2014/06/05
0
0
JavaScript2.0抢先尝鲜

责任编辑:胡铭娅作者:cnbeta 2009-08-18 【IT168技术分析】作 为一个开发者和作家,我的一部分工作就是跟随web世界最新发展潮流——不管是关于公司合并、在线购物潮流、或者是编程技巧。我...

晨曦之光
2012/03/09
0
0
深入理解 JavaScript 原型继承

继承的本质:重用 在探讨 JavaScript 的原型继承之前,先不妨想想为什么要继承? 考虑一个场景,如果我们有两个对象,它们一部分属性相同,另一部属性不同。通常一个好的设计方案是将相同逻辑...

穿越过来的键盘手
07/10
0
0
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JAVA 三种WebService 规范

JAVA 中共有三种WebService 规范,分别是JAX-WS(JAX-RPC)、JAXM&SAAJ、JAX-RS。 1. Jaxws(掌握) JAX-WS 的全称为 Java API for XML-Based Webservices ,早期的基于SOAP 的JAVA 的Web 服务...

onedotdot
20分钟前
0
0
将博客搬至CSDN

将博客搬至CSDN

xpbob
21分钟前
0
0
TensorFlow 拟合异或 one-hot方式

增加隐含层数目 之前是按照计算出的数值按照0.5分为0和1,现在是算出向量,用维度较大的作为结果 import tensorflow as tfimport numpy as np# 网络结构:2维输入 --> 2维隐藏层 --> ...

阿豪boy
24分钟前
0
0
Aidl进程间通信详细介绍

目录介绍 1.问题答疑 2.Aidl相关属性介绍 2.1 AIDL所支持的数据类型 2.2 服务端和客户端 2.3 AIDL的基本概念 3.实际开发中案例操作 3.1 aidl通信业务需求 3.2 操作步骤伪代码 3.3 服务端操作...

潇湘剑雨
39分钟前
0
0
python爬虫日志(3)下载图片

import urlliburl='https://xxx.jpg'#图片地址res=urllib.request.urlopen(url)#此函数用于对url的访问data=res.read() #字节流with open(r'D:\1.jpg',"wb") as code: c...

茫羽行
56分钟前
0
0
vue中$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运...

JamesView
今天
0
0
bash审计系统搭建

step1:使用saltstack工具bash部署>>>>>> # salt -N clienta state.sls audit step2:安装elasticsearch>>>>>> 注意: 1.不能以root用户进行启动,需要创建用户,并对解压的elasticsearch目录赋......

硅谷课堂
今天
0
0
Linux sar性能分析

Linux使用sar进行性能分析 sar简介 sar命令常用格式 sar常用性能数据分析 整体CPU使用统计-u 各个CPU使用统计-P 内存使用情况统计-r 整体IO情况-b 各个IO设备情况-d 网络统计-n sar日志保存-...

易野
今天
0
0
用 Python 实现打飞机,让子弹飞吧!

所用技术和软件 python 2.7 pygame 1.9.3 pyCharm 准备工作 安装好 pygame 在第一次使用 pygame 的时候,pyCharm 会自动 install pygame。 下载好使用的素材。 技术实现 初始化 pygame 首先要...

猫咪编程
今天
0
0
MySQL的行锁和表锁

简单总结一下行锁和表锁。 行锁 每次操作锁住一行数据。开销大,加锁慢;会出现死锁;锁定粒度最小,发生锁冲突的概率最低,并发度也最高。 表锁 每次操作锁住整张表。开销小,加锁快;不会出...

to_ln
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部