JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)
function Aaa(){ //父类
this.name = "小明";
}
Aaa.prototype.showName = function(){
alert( this.name );
}; function Bbb(){ //子类 }
Bbb.prototype = new Aaa(); //类式继承
var b = new Bbb();
b.showName();
console.log(b);
而其中的
Bbb.prototype = new Aaa();是有这么一个图的。
![]() |
所以经常会有一个面试题目是,如何用一句话做到继承?答案就是这句话。Bbb.prototype = new Aaa();但是这句话会有点问题的,不完善。 第一问题: 例如再在上面代码中加句
alert(b.constructor); //弹出来的Aaa的构造函数。
故而需要将
Bbb.prototype = new Aaa(); 修改成 Bbb.prototype = new Aaa(); Bbb.prototype.constructor = Bbb; //修改指向问题
再弹出 b.constructor 就正确了。
第二个问题:
将上面的this.name = "小明"; 改成 this.name = [1,2,3];
再将 var b = new Bbb();b.showName(); 改成 var b = new Bbb();b1.name.push(4);var b2 = new Bbb();alert(b.name); 会发现结果是1,2,3,4。对象实例已经互相影响了。
看到上面那张图不难理解(都是Aaa中的name)。所以属性和方法要分开继承。解决方案如下:
function Aaa(){ //父类
this.name = [,,];
}
Aaa.prototype.showName = function(){
alert( this.name );
}; function Bbb(){ //子类 Aaa.call(this); } var F = function(){};
F.prototype = Aaa.prototype;
Bbb.prototype = new F();
Bbb.prototype.constructor = Bbb; //修正指向问题
var b1 = new Bbb();
//b1.showName();
//alert( b1.name );
//alert( b1.constructor );
b1.name.push(); var b2 = new Bbb(); alert( b2.name );
F的作用就是 避免属性继承,而只是方法的继承
JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)的更多相关文章
- 为Node.js编写组件的几种方式
本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍 ...
- js面向对象组件
1.包装对象 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- JS面向对象组件(五) -- 复制对象(拷贝继承)
研究到这儿,竟然出现了一个面试题目 var a = { name : '小明' }; var b = a; b.name = '小强'; alert( a.name ); 结果必然是“小强”,原因是对 ...
- JS面向对象组件(四) -- 面向对象的继承
什么是继承 •在原有对象的基础上,略作修改,得到一个新的对象 •不影响原有对象的功能 //父类 createPerson function createPerson(name,sex){ this.n ...
- 黑马程序员——【Java基础】——面向对象(一)概述、类与对象、继承、抽象类、接口、多态、内部类
---------- android培训.java培训.期待与您交流! ---------- 一.面向对象概述 1.面向对象:是一个很抽象的概念,它相对面向过程而言,是一种程序设计的思想. 2.面向对 ...
- JS面向对象组件(六) -- 拖拽功能以及组件的延展
HTML部分 <div id="div1"></div> <div id="div2"></div> CSS部分 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- JS 面向对象 ~ 创建对象的 9 种方式
一.创建对象的几种方式 1.通过字面量创建 var obj = {}; 这种写法相当于: var obj = new Object(); 缺点:使用同一个接口创建很多单个对象,会产生大量重复代码 2. ...
- JS面向对象组件(三)--面向对象中的常用属性和方法
图片的由来看下面: 1.hasOwnProperty:看是不是对象自身下面的属性 var arr = []; arr.num = ; Array.prototype.num2 = ; //所有的数组对 ...
随机推荐
- poj 2762(强连通+判断链)
题目链接:http://poj.org/problem?id=2762 思路:首先当然是要缩点建新图,由于题目要求是从u->v或从v->u连通,显然是要求单连通了,也就是要求一条长链了,最 ...
- JS之事件(一)
事件:交互 异步监听,不是JS引擎监听的 一.绑定 1.ele.onxxxx(eg:onclick) = function (e) { //回调函数/事件处理函数 } 兼容性很好,但同一个事件仅能绑定 ...
- weka平台
weka平台界面简介 纵向排列的四个主要功能 1.探索(写自己的代码) 2.实验(比较算法) 3.可视化 4.命令行 1.探索 先将weka-src.jar文件解压到一个文件夹 将文件夹导入到Elip ...
- hdu 3537 Daizhenyang's Coin (翻硬币游戏)
#include<stdio.h> #include<algorithm> #include<string.h> using namespace std; ]; i ...
- javamail邮件中插入图片
转载 http://duanmumu.blog.163.com/blog/static/1911133502012715104016481/ // TODO Auto-generated method ...
- 让浏览器屏蔽js
有时候为了测试js是否做到了渐进增强,需要屏蔽下js 做法: Internet选项>>安全>>自定义级别 禁用java小程序脚本和活动脚本 有的浏览器调试器直接就有这个功能
- 如何在Eclipse中添加Tomcat的jar包
原文:如何在Eclipse中添加Tomcat的jar包 右键项目工程,点击Java Build Path 点击Add Library,选择Server Runtime 选择Tomcat版本 此时就看到 ...
- HtmlAgilityPackage XPath学习
最近的开发中要用到htmlAgilityPackage, 所以记录一下XPath相关知识! XPath 简介 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对 ...
- C++:流类库与输入输出
7.2.1 C++的输入输出流 ios:流基类(抽象类) istream:通用输入流类和其他输入流的基类 ostream:通用输出流类和其他输出类的基类 iostream:通用输入输出流类和其他输入输 ...
- iOS:实现MKAnnotation协议,在地图上设置大头针,点击显示具体的位置信息
如何添加大头针(地标): 通过MapView的addAnnotation方法可以添加一个大头针到地图上 通过MapView的addAnnotations方法可以添加多个大头针到地图上 –(void)a ...