javascript类的原型模式,我想在这里简单的说一下,javascript本身不像java一样有着严格的继承,我们说javascript的继承,也是我们仿面向对象语言仿出来的,所以javascript虽然支持面向对象的编程,但是我们并不认为javascript是一种很好的面向对象的编程语言。
那么javascript的面向对象是如何实现的呢?
首先先简单说下prototype是每个类可以直接调用的,这个就可以说成是javascript的类的原型,当然这牵扯到原型链这种设计模式,当然我们以后会介绍到;
而__proto__是每个对象可以直接调用的原型。
那么我们取到原型有什么样的好处吗?
其实好处就是我们可以实现继承,另一种意思就是说,我们可以通过将这个类的原型指向某个对象,或者某个对象的原型,从理解层面上来说,我们可以理解为,将这个对象的引用指向了我们=右边的对象,所以这样的话,就比较好理解了,待会结合代码会有一些图供大家理解,如果不理解,可以留言讨论。
代码和注释如下:
/**
* javascript原型模式(prototype)
* 1.原型是一个对象,其他的对象可以通过他实现属性的继承
* 所有的对象在默认的情况下都有一个原型,因为原型本身也是对象所以一个类的真正
* 原型是被类的内部的[Prototype]属性所持有.
* 2.什么可以称之为对象
* 在javascript一个对象就是任何的无序的键值对的集合 function | var a = {}
* 如果它不是一个主数据类型(undefined,null,boolean,number,String)
* 其他的通通叫做对象
*/
(function(){
/**
* javascript中的原型(prototype)是和函数(function紧密连接的)
* var o = {} 他不是用function 他有原型吗?
* 答:
* 必须的
* 每一个通过new操作符生成出来的对象都持有一个属性__proto__,
* 这个属性保存了创建他的构造函数的prototype的原型的引用
*/
function person(){}//定义一个空对象
person.prototype.name = "USPCAT.COM";
person.prototype.showName = function(){
//这个this表示调用本函数的一个具体实例化的类
alert(this.name);
}
new person().showName();
var cat = {};//cat空类
//默认隐藏的调用下面的代码
Object.getPrototypeOf(cat).name = "MAOMI";//通过getPrototypeOf这个函数可以直接得到对象的上一级原型链
cat.__proto__.master = "USPCAT.COM";
//测试、//隐式调用上边的方法
cat.age = 2;
cat["sex"] = "MAN";
alert(cat.name +" "+cat.age+" "+cat["sex"]+" "+cat.master)
/**
* 利用原型模式实现见的继承
*
*/
function per(){
this.getName = function(str){
alert(str)
}
}
per.prototype.getAge = function(age){
alert(age)
}
var a = {};//空类 a是对象
a.__proto__ = per.prototype;
a.getAge(2);
//a.getName("YUNFENGCHENG")
/**
* 简单方式实现继承
* JS中是无法是实现多继承
*/
var b = {};
b.__proto__ = new per();
//改变constructor函数
b.__proto__.constructor = b;
b.getAge(1)
b.getName("JAVASCRIPT")
// class a{
// }
// class B extend A{
// public B(){
// super()
// }
// }
/**
* 串连继承
*/
function m(){
this.showM = function(){
alert("IM IS M")
}
}
function n(){
this.showN = function(){
alert("IM IS n")
}
}
function k(){};
n.prototype = new m();
n.prototype.constructor = n;
k.prototype = new n();
k.prototype.constructor = k;
var boo = new k();
boo.showM();
boo.showN();
})()
这张图,就是说明了我们可以类似理解为继承的时候引用的指向问题
这张图也是
这张图就是说明了串联继承
分享到:
相关推荐
JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单
JavaScript凌厉开发——Ext详解与实践_源码清单.rarJavaScript凌厉开发——Ext详解与实践_源码清单.rarJavaScript凌厉开发——Ext详解与实践_源码清单.rar
“互联网 ”背景下高职院校课程思政教学改革研究——以“HTML_CSS_JS网页开发”课程为例.pdf
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript网页开发——体验式学习教程.pdf JavaScript网页开发——体验式学习教程.pdf
Python 13、JAVASCRIPT基础 5-2_JAVASCRIPT_Day05_PM.mp4
类式继承模式#3——借用和设置原型 类式继承模式#4——共享原型 类式继承模式#5——临时构造函数 Klass 原型继承 通过复制属性实现继承 借用方法 小结 第7章 设计模式 单体模式 工厂模式 ...
JavaScript中的原型继承基础学习教程_.docx
PDF格式的javascript学习资料,希望对你有所帮助
计算机应用基础学习过程表现——国开大全文共2页,当前为第1页。计算机应用基础学习过程表现——国开大全文共2页,当前为第1页。学习过程表现 计算机应用基础学习过程表现——国开大全文共2页,当前为第1页。 计算机...
JavaScript凌厉开发——Ext JS3详解与实践JavaScript凌厉开发——Ext JS3详解与实践
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
JavaScript凌厉开发——Ext详解与实践
HTML5开发教程-2.HTML5基础 HTML5开发教程-3.HTML核心元素1 HTML5开发教程-4.HTML核心元素2 HTML5开发教程-5.CSS基础 1.HTML常用标记超链接表格表单 2.HTML常用标题段落等标记 3.相关概念及HTML语法 4-CSS语法部分...
NULL 博文链接:https://zisefeiniao.iteye.com/blog/387035
010202_JavaScript简介 010203_事件处理 010204_window对象 010301_认识XML 010302_XML解析 —— DOM 010303_XML解析 —— SAX 010304_XML解析 —— JDOM 010305_XML解析 —— DOM4J 010306_使用JavaScript操作DOM ...
JavaScript毕业设计——篮球赛事助手源码。已获高分通过项目。 在功能上实现创建比赛,统计参赛人员,统计比赛得分与犯规次数。 安装教程 启动服务器操作 (1) 找到服务器 woao_server 所在文件,点击进去文件 (2...
张孝祥老师生前鸿篇巨著。包括html,CSS,DOM编程,javaScrip语法,脚本编程的相关技术,正则表达式。
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part2 因为源代码比较大,压缩后76M左右 所以分为四个包上传
类式继承模式#3——借用和设置原型 类式继承模式#4——共享原型 类式继承模式#5——临时构造函数 Klass 原型继承 通过复制属性实现继承 借用方法 小结 第7章 设计模式 单体模式 工厂模式 迭代器模式 装饰者模式 策略...