js继承的实现(es5)
function Super(name){
this.name=name;
this.age=;
this.array=[,,];
this.obj={a:'prop'};
this.say=function(){
console.log(this.name);
}
}
Super.prototype.testInherit=function(){
console.log('I am method of super prototype')
}
child1.testInherit();
function Child1(name){
Super.apply(this,arguments);
this.name=name;
this.sayName=function(){
console.log(this.name);
}
}
var parent=new Super('lucy');
var child1=new Child1('jack');
var child1=new Child1('jack2');
console.log(parent,child1);
console.log(child1.__proto__===Child1.prototype,child1 instanceof Super);//true flase
child1.array.push();
console.log(child1.array,child2.array,s1.array,);
child1.testInherit();
function Child2(name){
this.name=name;
this.sayName=function(){
console.log(this.name);
}
}
var parent=new Super('lucy');
Child2.prototype=parent;
var child1=new Child2('jack');
var child2=new Child2('jack2');
child1.array.push();
child1.obj.b="prop2";
console.log(child1.array,child2.array,child1.obj,child2.obj);
console.log(child1.constructor);
function Child3(name){
Super.apply(this,arguments);
this.name=name;
}
var parent=new Super('lucy');
Child3.prototype=parent;
var child1=new Child3('jack');
var child2=new Child3('jack2');
child1.array.push();
console.log(child1.array,child2.array);
console.log(child1.constructor);
function Child4(name){
Super.apply(this,arguments);
this.test=;
}
Child4.prototype=Super.prototype;//改进父类构造函数调用两次问题
Child4.prototype.constructor=Child4;
var child1=new Child4('bob');
var child2=new Child4('bob2');
console.log(child1.__proto__===Child4.prototype);
console.log(child1.__proto__.constructor,'\n',Child4.prototype.constructor,'\n',Super.prototype.constructor); console.log(Super.prototype.constructor); //这种方法改变了父类的构造函数
for(var itm in Child4.prototype){
console.log(itm);
}
// 或者使用Object.create()创建一个过渡对象--这样子类重新定义构造函数,就能使父类和子类各有自己的构造函数
function Child5(name){
Super.apply(this,arguments);
this.test=;
} Child5.prototype=Object.create(Super.prototype);
Child5.prototype.constructor=Child5;
Object.defineProperty(Child5.prototype,'constructor',{//Child5的原型是一个实例对象,所以显示的定义constructor会改变其不可枚举的特性,这里修正一下
enumerable:false
});
var child=new Child5('end');
console.log(Child5.prototype.constructor,Super.prototype.constructor);
console.log(child instanceof Child5,child instanceof Super);
console.log(child.constructor,Child5.prototype.isPrototypeOf(child),Super.prototype.isPrototypeOf(child));
for(var itm in Child5.prototype){
console.log(itm);
}
function inheritProperty(sup,child){
function F(){};
F.prototype=sup.prototype;
var inner=new F();
inner.constructor=child;
child.prototype=inner;
Object.defineProperty(child.prototype,'constructor',{
enumerable:false
});
}
function Child6(name){
this.age=;
this.name=name;
}
inheritProperty(Super,Child6);
Child6.prototype.sayAge=function(){
return this.age;
}
var child=new Child6('end');
console.log(child.constructor);
console.log(Child6.prototype.constructor);
console.log(child.sayAge());
以上继承都是以1,2为基础的,具体说实现继承的方式就这两种,其他只是对这两种的组合改造优化
js继承的实现(es5)的更多相关文章
- js继承精益求精之寄生式组合继承
一.混合/组合继承的不足 上一篇JS继承终于混合继承,认真思考一下,发现其还是有不足之处的: 空间上的冗余:在使用原型链的方法继承父类的原型属性(Animal.prototype)的同时,也在子类的原 ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)
一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...
- JS继承的一些见解
JS继承的一些见解 js在es6之前的继承是五花八门的.而且要在项目中灵活运用面向对象写法也是有点别扭,更多的时候还是觉得面向过程的写法更为简单,效率也高.久而久之对js的继承每隔一段时间就会理解出现 ...
- js继承(自备水,这非常干货)
讲js继承之前,想一想什么是继承? 生活中有很多例子,比方说继承财产,继承女朋友的前男友的前女友 ヽ(ー_ー)ノ ,这些和js继承差不多,但是有一个不一样的地方,就是继承过后,原先的人就没有了,js继 ...
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...
- js继承的方式及其优缺点
js继承方法 前因:ECMAScript不支持接口继承,只支持实现继承 一.原型链 概念:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针,让 ...
- 让我们纯手写一个js继承吧
继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式 在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则 ...
- 简单易懂的JS继承图解
JS继承的实现方式一共有八种.下面我们来一个一个瞅一下.注意️:文章依据个人理解,难免有问题,还望各位及时指出!!!!! 原型链继承 借用构造函数继承 组合继承 原型式继承 寄生继承 寄生组合式继承 ...
- js继承
js继承有5种实现方式: 继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function ...
- js继承之call,apply和prototype随谈
在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...
随机推荐
- CString->char*.,char*->CString,char*->LPCTSTR
CString->char* CString strSource;//宣告CString char* charSource; //宣告char* 法1: charSource = (char*) ...
- (最小生成树)Eddy's picture -- hdu -- 1162
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1162 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- Codeforces758D Ability To Convert 2017-01-20 10:29 231人阅读 评论(0) 收藏
D. Ability To Convert time limit per test 1 second memory limit per test 256 megabytes input standar ...
- cenos 安装nginx并添加到service
系统平台:CentOS release 6.6 (Final) 64位. 一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtoo ...
- VUE 学习笔记 四 计算属性和监听器
1.计算属性 对于任何复杂逻辑,你都应当使用计算属性 <div id="example"> <p>Original message: "{{ me ...
- ubuntu 16.04.1 nginx彻底删除与重新安装
1.删除nginx,-purge包括配置文件 sudo apt-get --purge remove nginx 2.移除全部不使用的软件包 sudo apt-get autoremove 3.罗列出 ...
- C# PowerPoint操作的基本用法。
代码using System;using System.Collections.Generic;using System.Linq;using System.Text;using OFFICECORE ...
- 手动开发PHP模板引擎 一 (35)
模板叫做TPL,模仿于smarty模板引擎. 我们所说的模板是Web模板,是主要由HTML标记组成的语言来编写的页面,但也有如何表示包含动态生成内容的方式(解析标签).模板引擎是一种软件库,允许我们从 ...
- web思维导图(前期)
- 脚本:定时释放 Linux/CentOS 缓存【转载自:杭州山不高】
定时释放Linux/CentOS缓存的脚本(yl_dropcaches)如下: #!/bin/bash used=`free -m | awk 'NR==2' | awk '{print $3}'` ...