js原型继承的几种方式
1. 原型链继承
2,构造函数继承(对象冒充继承)
3,组合继承(原型链继承+构造函数继承)
4,原型式继承
5. 寄生组合式继承
一。原型链继承
function Show(){
this.name="run";
}
function Run(){
this.age="20"; //Run继承了Show,通过原型,形成链条
}
Run.prototype=new Show();
var show=new Run();
alert(show.name)//结果:run
二。构造函数继承(对象冒充继承)
为了解决引用共享和超类型无法传参的问题,我们采用一种叫借用构造函数的技术,或
者成为对象冒充(伪造对象、经典继承)的技术来解决这两种问题
function Box(age){
this.name=['Lee','Jack','Hello']
this.age=age;
}
function Desk(age){
Box.call(this,age); //对象冒充,给超类型传参
}
var desk = new Desk(200);
alert(desk.age);//200
alert(desk.name);//['Lee','Jack','Hello']
desk.name.push('AAA'); //添加的新数据,只给 desk
alert(desk.name)//['Lee','Jack','Hello','AAA']
三。组合继承(原型链继承+构造函数继承)
借用构造函数虽然解决了刚才两种问题, 但没有原型, 复用则无从谈起。 所以, 我们需
要原型链+借用构造函数的模式,这种模式成为组合继承。
function Box(age) {
this.name = ['Lee', 'Jack', 'Hello']
this.age = age;
}
Box.prototype.run = function () {
return this.name + this.age;
};
function Desk(age) {
Box.call(this, age); //对象冒充
}
Desk.prototype = new Box(); //原型链继承
var desk = new Desk(100);
alert(desk.run());
四。原型式继承
这种继承借助原型并基于已有的对象创建新对象,
同时还不必因此创建自定义类型
function obj(o) { //传递一个字面量函数
function F() {} //创建一个构造函数
F.prototype = o; //把字面量函数赋值给构造函数的原型
return new F(); //最终返回出实例化的构造函数
}
var box = { //字面量对象
name : 'Lee',
arr : ['哥哥','妹妹','姐姐']
};
var box1 = obj(box); //传递
alert(box1.name);
box1.name = 'Jack';
alert(box1.name);
alert(box1.arr);
box1.arr.push('父母');
alert(box1.arr);
var box2 = obj(box); //传递
alert(box2.name);
alert(box2.arr); //引用类型共享了
五。寄生组合式继承
寄生组合式继承解决了两次调用的问题,组合式继承就会有两次调用的情况
基本模型如下:
function object(o) {
function F() {}
F.prototype = o;
return new F();
} function inheritPrototype(subType, superType) {
var prototype = object(superType.prototype); //创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype; //指定对象
}
后面的寄生式继承和寄生组合模型式继承还搞不懂,哈哈哈,好尴尬
寄生组合继承,解决了两次调用的问题 |
js原型继承的几种方式的更多相关文章
- js实现继承的5种方式 (笔记)
js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...
- js 实现继承的几种方式
//js中实现继承的几种方式 //实现继承首先要有一个父类,先创造一个动物的父类 function Animal(name){ this.name = name; this.shoot = funct ...
- js 实现继承的6种方式(逐渐优化)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- js实现继承的两种方式
这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...
- js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...
- 深入浅出js实现继承的7种方式
给大家介绍7中js继承的方法 有些人认为JavaScript并不是真正的面向对象语言,在经典的面向对象语言中,您可能倾向于定义类对象,然后您可以简单地定义哪些类继承哪些类(参考C++ inherita ...
- JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式
前 言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...
- js 中继承的几种方式
继承的方式一共有三种: 一.原型继承 通过prototype 来实现继承. function Person(name,age) { this.name=name; this.age=age; } ...
- JS 原型继承的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Semiautomated IMINT Processing Baseline System——翻译
题目 半自动的IMINT(图像情报)处理基准系统 摘要 SAIP ACTD(半自动图像情报处理高级概念技术展示项目)的目的是,通过战略上的传感器采集,使图像成为指挥官掌控整个战场的主要源头.该采集系统 ...
- NOIP2000单词接龙[DFS]
题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...
- 奇葩啊,HOLOLENS里模拟器截不了图,后台DEVIE PORTAL可以截
奇葩啊,HOLOLENS里模拟器截不了图,后台DEVIE PORTAL可以截 截屏 https://developer.microsoft.com/en-us/windows/holographic/ ...
- u3d_Shader_effects笔记5 第二章 通过UV,进行纹理移动
1.前面心情 公司最近打包,像我等小弟闲着,看代码容易困,没事偷着学shader,不过还是要多交流才行. 2.本文参考 这次参考比较多:由texture uv延伸问题多,主要是不明白变量定义: htt ...
- Xcode 快捷键
1.commmand +shift +k ,隐藏模拟器键盘,用户可以在真实键盘输入到模拟屏幕上.
- 画图解释 SQL join 语句
转:http://blog.jobbole.com/40443/ 本文由 伯乐在线 - 奇风余谷 翻译.未经许可,禁止转载!英文出处:Jeff Atwood.欢迎加入翻译组. 我认为 Ligaya T ...
- iOS中的存储方式
1.Plist 1.1 了解沙盒 每个iOS应用都有自己的应用沙盒(应用沙盒就是文件系统目录),与其它文件系统隔离.应用必须呆在自己的沙盒里.其它应用不能访问该沙盒. 一个程序中所有的非代码文件都可以 ...
- 树莓派B+安装archlinux arm版
按Archlinux官网操作而来,如有疑问参照官网:http://archlinuxarm.org/platforms/armv6/raspberry-pi 以我自己安装过程举例,我的SD卡挂载在ub ...
- React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
- 解决MWPhotoBrowser中的SDWebImage加载大图导致的内存警告问题
下面两种现象,用同一种方法解决 1.解决MWPhotoBrowser中的SDWebImage加载大图导致的内存警告问题 2.突然有一天首页访问图片很慢,至少隔20多秒所有图片才会出来.(解析:app使 ...