最近学了 JS 的面向对象,这篇文章主要是探讨 JS 的面向对象中继承的那些事。

JS中继承的特点:

1、子类继承父类;

2、子类可以用父类的方法和属性

3、子类的改变可以不影响父类

下面用一个例子来说明 JS 的继承

这段代码创建了一个父类以及它的原型,同时还创建了一个子类,并继承了父类的私有属性

 <script>
//这是父类
function Father(name,age,marry){
this.name=name;
this.age=age;
this.marry=marry;
}
//父类的原型
Father.prototype.showName=function(){
alert(this.name);
} //子类
function Son(name,age,marry,weight){
Father.call(this,name,age,marry);
this.weight=weight;
} </script>

当子类Son想继承父类的原型时,我的做法一开始是这么做的

 <script>
//这是父类
function Father(name,age,marry){
this.name=name;
this.age=age;
this.marry=marry;
}
//父类的原型
Father.prototype.showName=function(){
alert(this.name);
} //子类
function Son(name,age,marry,weight){
Father.call(this,name,age,marry);
this.weight=weight;
} //错误的做法
Son.prototype=Father.prototype;
Son.prototype.showAge=function(){
alert(this.age);
}
var father=new Father('王大锤',30,true);
alert(father.showAge); </script>

运行的结果可以发现,子类原型的改变影响了父类的原型,父类的原型中本来是没有showAge方法的,这就违背了前面继承的第三个特点了。

分析原因:上面代码的第20行  Son.prototype=Father.prototype;这里的 '=' 两边都是对象,那么它代表的意思就是引用,如果是引用的话,左边的对象改变,肯定会影响了右边的对象

      所以才出现了子类原型的改变影响了父类的原型。

解决办法

方法一:核心思路,前面的问题不是说 '=' 是引用的关系才导致问题的嘛,那这里就保证 '=' 永远是赋值的关系,而不是引用。这里就定义一个 Clone() 方法,将父类对象拷贝给子类。

    Clone() 方法里用到递归的原因是,在拷贝的过程中对象中可能嵌套对象。

 <script>
//这是父类
function Father(name,age,marry){
this.name=name;
this.age=age;
this.marry=marry;
}
//父类的原型
Father.prototype.showName=function(){
alert(this.name);
} //子类
function Son(name,age,marry,weight){
Father.call(this,name,age,marry);
this.weight=weight;
}
Son.prototype=new Clone(Father.prototype);
Son.prototype.showAge=function(){
alert(this.age);
}
var father=new Father('王大锤',30,true);
alert(father.showAge); //通过克隆对象:核心思路是保证 '=' 是赋值的关系,而不是引用,也就是保证 '=' 的右边不是对象
function Clone(obj){
for(var i=0;i<obj.length;i++){
if(typeof(obj[key]=='object')){
this.key=new Clone(obj[key]);
}else{
this.key=obj[key];
}
}
}
</script>

这时候的结果父类对象的showAge方法是undefined

方法二:代码很简单,但是很难想到,没有第一个方法那么好理解。核心思想:对象自身属性的改变,不会影响其构造函数的属性的改变。

 <script>
//这是父类
function Father(name,age,marry){
this.name=name;
this.age=age;
this.marry=marry;
}
//父类的原型
Father.prototype.showName=function(){
alert(this.name);
} //子类
function Son(name,age,marry,weight){
Father.call(this,name,age,marry);
this.weight=weight;
}
function fn(){}
fn.prototype=Father.prototype;
Son.prototype=new fn();
Son.prototype.showAge=function(){
alert(this.age);
}
var father=new Father('王大锤',30,true);
alert(father.showAge); //通过克隆对象:核心思路是保证 '=' 是赋值的关系,而不是引用,也就是保证 '=' 的右边不是对象
// Son.prototype=new Clone(Father.prototype);
// function Clone(obj){
// for(var i=0;i<obj.length;i++){
// if(typeof(obj[key]=='object')){
// this.key=new Clone(obj[key]);
// }else{
// this.key=obj[key];
// }
// }
// }
</script>

探讨 JS 的面向对象中继承的那些事的更多相关文章

  1. JavaScript中继承的那些事

    引言 JS是一门面向对象的语言,但是在JS中没有引入类的概念,之前特别疑惑在JS中继承的机制到底是怎样的,一直学了JS的继承这块后才恍然大悟,遂记之. 假如现在有一个“人类”的构造函数: functi ...

  2. 实用JS系列——面向对象中的类和继承

    背景: 在最开始学习JavaScript时,我们就知道,它是一种脚本语言,也有面向对象机制.但它的面向对象继承机制是基于原型的,即Prototype.今天,我们就来找一下JS中OO的影子. 创建类 1 ...

  3. javascript面向对象中继承实现?

    面向对象的基本特征有:封闭.继承.多态. 在javascript中实现继承的方法: 1.原型链(prototype chaining) 2.call()/apply() 3.混合方式(prototyp ...

  4. DotNet中的继承,剖析面向对象中继承的意义

    继承是面向对象程序设计不可缺少的机制,有了继承这个东西,可以提高代码的重用,提高代码的效率,减轻代码员的负担. 面向对象三大特性:封装.继承.多态是相辅相成的.封装为了继承,限制了父类的哪些成员被子类 ...

  5. javascript面向对象中继承实现的几种方式

    1.原型链继承: function teacher(name){ this.name = name; } teacher.prototype.sayName = function(){ alert(t ...

  6. JS中面向对象中的继承(常用写法)---核心部分

    1.基本概念 子类继承父类,但是不能影响父类.包括1.混合继承(构造函数+原型) 2.ES6新增class的继承. 接下来介绍,面向对象中继承的两种常用写法.即混合继承(构造函数+原型)和class继 ...

  7. JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式

      前  言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...

  8. js中继承的几种用法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="BACKGROUND-COLOR: #ffffff">& ...

  9. js中继承的方法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 代码如下: <SPAN style="<SPAN style="FONT-SIZE ...

随机推荐

  1. 面试大厂回来后,有一些话想对 Java 后端开发说一说

    在上周,我密集面试了若干位Java后端的候选人,工作经验在3到5年间.我的标准其实不复杂:第一能干活,第二Java基础要好,第三最好熟悉些分布式框架,我相信其它公司招初级开发时,应该也照着这个标准来面 ...

  2. UVALive - 3695 Distant Galaxy

    InputThere are multiple test cases in the input file. Each test case starts with one integer N, (1 ≤ ...

  3. 笔记-JavaWeb学习之旅15

    Filter:过滤器 概念:当访问服务器的资源是,过滤器可以将请求拦截下来,完成一些特殊的功能 快速入门: 步骤: 定义一个类,实现接口Filter 复写方法 配置拦截路径 package com.d ...

  4. js框架:angularJs

    AngularJS是一个javascript框架,是一个以JavaScript编写的库,可通过<script>标签添加到HTML页面 AngularJS使得开发现代的单一页面应用程序(SP ...

  5. ignoring option MaxPermSize=256m; support was removed in 8.0 - unsupported JVM property

    MaxPermSize 在JVM8 中已经被删除. 可以使用 JAVA_OPTS="-Xms1303m -Xmx1303m -XX:MaxPermSize=256m 参考 https://b ...

  6. LDAP理论知识

    整理改编自: https://www.cnblogs.com/yjd_hycf_space/p/7994597.html http://blog.51cto.com/407711169/1439623 ...

  7. .bat 文件学习

    参考文章:http://www.cnblogs.com/glaivelee/archive/2009/10/07/1578737.html 重点: @echo off 关闭回显,不显示脚本中的命令 e ...

  8. Codeforces Round #563 (Div. 2) A. Ehab Fails to Be Thanos

    链接:https://codeforces.com/contest/1174/problem/A 题意: You're given an array aa of length 2n2n. Is it ...

  9. python的入门1(补发)

    一.python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

  10. net core (上)

    net core (上) 本文是基于Windows10的. 下载地址: https://code.visualstudio.com/ insider 版下载地址: https://code.visua ...