新闻资讯  快讯  焦点  财经  政策  社会
互 联 网   电商  金融  数据  计算  技巧
生活百科  科技  职场  健康  法律  汽车
手机百科  知识  软件  修理  测评  微信
软件技术  应用  系统  图像  视频  经验
硬件技术  知识  技术  测评  选购  维修
网络技术  硬件  软件  设置  安全  技术
程序开发  语言  移动  数据  开源  百科
安全防护  资讯  黑客  木马  病毒  移动
站长技术  搜索  SEO  推广  媒体  移动
财经百科  股票  知识  理财  财务  金融
教育考试  育儿  小学  高考  考研  留学
您当前的位置:首页 > IT百科 > 程序开发 > 语言 > javascript

JavaScript原型详解

时间:2019-12-03 16:54:08  来源:  作者:

1,前言

下面是2008年Github创建以来,各种编程语言的排名情况

<a href=http://www.solves.com.cn/it/cxkf/yy/JAVA/ target=_blank class=infotextkey>JAVA</a>Script原型详解

 

排名

其中JavaScript自2013年之后就盘踞第一名,成为github上被使用最多的语言,早期,JS的使用还主要集中于浏览器中,但是随着node.js进军服务器开发和React Native逐渐向移动端渗透,一个属于JS的全栈时代就要来临了。而且JS界还流传一句名言:“所有能用JS开发的应用程序,最终都会用JS来开发”。我就问你怕不怕?好了,说了这么多,我并不是想说JS为世界上最好的语言(显然php才是,对吧?←_←),也不是觉得JS会替代谁,我只是觉得,JavaScript将会是一个大家(不止web端)都应该了解和学习的语言工具。

2,面对对象(OOP)

2.1 实现思路

面对对象是大家都很熟悉的程序设计思想,是对真实世界的抽象,目前主要OOP语言用来实现面对对象的基础是类,通过类的封装,继承来映射真实世界。包括Java,C#,甚至是Python等都通过类的设计来实现面对对象。但是细想起来也会觉得有问题,因为真实世界其实没有类这种概念,只有一个个不同的对象,真实世界中,继承关系发生在对象和对象之间,而不是类。就比如孩子是对象,父母也是对象,孩子(对象)继承自父母(对象)

JS也是面对对象的编程语言,只不过它实现面对对象的思路是基于原型(prototype),而不是类。这种思路也叫对象关联(Object Link Other Object),即在对象上直接映射那种真实世界的关系(如继承)。

2.2 原型概念

相关的概念其实我研究了好几天,除开原型概念本身,与之联系的对象的产生,构造函数,proto,prototype的区别,为什么对象没有prototype这个指向原型的属性,而是使用proto来指向原型?

好,我们先来谈谈原型这个概念。JS中一切皆对象,而每个对象都有一个原型(Object除外),这个原型,大概就像Java中的父类,所以,基本上你可以认为原型就是这个对象的父对象,即每一个对象(Object除外)内部都保存了它自己的父对象,这个父对象就是原型。一般创建的对象如果没有特别指定原型,那么它的原型就是Object(这就很类似Java中所有的类默认继承自Object类)。

2.3 对象创建

在JS中,对象创建的方法有很多种,最常见的如下:

//第一种,手动创建
var a={'name':'lala'}; 
//第二种,构造函数
function A(){
 this.name='lala';
}
var a=new A();
//第三种,class (ES6标准写法)
class A{
 constructor(){
 //super();此处没有使用extends显式继承,不可使用super()
 this.name='lala';
 }
}
var a=new A()
//其实后面两种方法本质上是一种写法复制代码

这三种写法创建的对象的原型(父对象)都是Object,需要提到的是,ES6通过引入class ,extends等关键字,以一种语法糖的形式把构造函数包装成类的概念,更便于大家理解。是希望开发者不再花精力去关注原型以及原型链,也充分说明原型的设计意图和类是一样的。

2.3 查看对象原型

当对象被创建之后,查看它们的原型的方法不止一种,以前一般使用对象的proto属性,ES6推出后,推荐用Object.getPrototypeOf()方法来获取对象的原型

function A(){
 this.name='lala';
}
var a=new A();
console.log(a.__proto__) 
//输出:Object {}
//推荐使用这种方式获取对象的原型
console.log(Object.getPrototypeOf(a)) 
//输出:Object {}复制代码

无论对象是如何创建的,默认原型都是Object,在这里需要提及的比较特殊的一点就是,通过构造函数来创建对象,函数A本身也是一个对象,而A有两个指向表示原型的属性,分别是proto和prototype,而且两个属性并不相同

function A(){
 this.name='lala';
}
var a=new A();
console.log(A.prototype) 
//输出:Object {}
console.log(A.__proto__) 
//输出:function () {}
console.log(Object.getPrototypeOf(A))
//输出:function () {}复制代码

函数的的prototype属性只有在当作构造函数创建的时候,把自身的prototype属性值赋给对象的原型。而实际上,作为函数本身,它的原型应该是function对象,然后function对象的原型才是Object。

总之,建议使用ES6推荐的查看原型和设置原型的方法。

2.4 原型的用法

其实原型和类的继承的用法是一致的:当你想用某个对象的属性时,将当前对象的原型指向该对象,你就拥有了该对象的使用权了。

function A(){
 this.name='world ';
}
function B(){
 this.bb="hello"
 }
var a=new A();
var b=new B();
Object.setPrototypeOf(a,b);
//将b设置为a的原型,此处有一个问题,即a的constructor也指向了B构造函数,可能需要纠正
a.constructor=A;
console.log(a.bb)
//输出 hello复制代码

(增补)

如果使用ES6来做的话则简单许多,甚至不涉及到prototype这个属性

class B{
 constructor(){
 this.bb='hello'
 }
}
class A extends B{
 constructor(){
 super()
 this.name='world'
 }
}
var a=new A();
console.log(a.bb+" "+a.name);
//输出hello world
console.log(typeof(A))
//输出 "function"复制代码

怎么样?是不是已经完全看不到原型的影子了?活脱脱就是类继承,但是你也看得到实际上类A 的类型是function,所以说,本质上class在JS中是一种语法糖,JS继承的本质依然是原型,不过,ES6引入class,extends 来掩盖原型的概念也是一个很友好的举动,对于长期学习那些类继承为基础的面对对象编程语言的程序员而言。

我的建议是,尽可能理解原型,尽可能用class这种语法糖。


2.5 原型链

这个概念其实也变得比较简单,可以类比类的继承链条,即每个对象的原型往上追溯,一直到Object为止,这组成了一个链条,将其中的对象串联起来,当查找当前对象的属性时,如果没找到,就会沿着这个链条去查找,一直到Object,如果还没发现,就会报undefined。那么也就意味着你的原型链不能太长,否则会出现效率问题。

3,总结

  • 对于原型概念的理解
  • 类比类的继承,对象的原型可以理解为对象的父对象
  • 原型的运用
  • 尽可能使用ES6的标准,使用class,extends,Object.getPrototype(),Object.setPrototype()等等
  • 需要注意的点
  • 原型继承链条不要太长
  • 指定原型时,注意constructor也会改变。

4,后记(增补)

还有人觉得我的分析很抽象,所以,我再总结一下,如果要一句话理解JS中的原型是什么,那就是,对象的原型就指的对象的父对象。每个对象都有父对象,父对象本身也有父对象(爷对象?)。而原型链呢,很像过去家谱的概念,可以从你往上追溯你父亲,到爷爷,到太爷爷一直到头,这就形成了一个链条,如果其中每个人都比作一个对象,那么这个链条就是原型链。



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容来自互联网,内容观点仅代表作者本人,如有任何版权侵犯请与我们联系,我们将立即删除。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
如果你是一个JavaScript新手或仅仅最近才在你的开发工作中接触它,你可能感到沮丧。所有的语言都有自己的怪癖(quirks)&mdash;&mdash;但从基于强类型的服务器端语言转移过来的开...【详细内容】
2020-03-13   JavaScript  点击:(8)  评论:(0)  加入收藏
Javascript 是一种奇怪语言,有些人喜欢它,有些人讨厌它。它有许多独特的机制,这些机制在其他流行语言中不存在,也没有对应的机制,还有突出明显的就是代码的执行顺序了解浏览器环...【详细内容】
2020-03-13   JavaScript  点击:(6)  评论:(0)  加入收藏
正如标题所述,JavaScript闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识。最近看到的一些文章,终于,...【详细内容】
2020-03-11   JavaScript  点击:(6)  评论:(0)  加入收藏
正如标题所述,JavaScript闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识。最近看到的一些文章,终于,...【详细内容】
2020-03-11   JavaScript  点击:(8)  评论:(0)  加入收藏
昨天看权威指南的时候看到一个个人觉得很优雅的写法,便想着记录一下(我的梦想就是写一手富有诗意的优雅代码)在Js世界中,有些操作会让你无法理解,但是却无比优雅。如有错误,欢迎批...【详细内容】
2020-03-09   JavaScript  点击:(0)  评论:(0)  加入收藏
一、JavaScript 数据类型JavaScript 数据类型有两种,分别是基本数据类型和引用数据类型。 基本数据类型NumberStringBooleanUndefinedNullSymbol (ES6 新增,表示独一无二的值)...【详细内容】
2020-03-07   JavaScript  点击:(4)  评论:(0)  加入收藏
JavaScript 是一种复杂的语言。如果是你是高级或者初级 JavaScript 开发人员,了解它的基本概念非常重要。本文介绍 JavaScript 至关重要的12个概念,但绝对不是说 JavaScript...【详细内容】
2020-03-05   JavaScript  点击:(2)  评论:(0)  加入收藏
使用 ES2015 模块,您可以将应用程序代码分成可重用的、封装的、专注于单一任务的模块。这很好,但是如何构造模块呢?一个模块应该有多少个函数和类?这篇文章介绍了有关如何更好地...【详细内容】
2020-03-03   JavaScript  点击:(4)  评论:(0)  加入收藏
文章来源:加米谷大数据HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。<script> 标签如需在 HTML 页面中插...【详细内容】
2020-03-01   JavaScript  点击:(10)  评论:(0)  加入收藏
在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛。在web应用项目中,需要大量JavaScript的代码,将来也会越来越多。 但是由于JavaSc...【详细内容】
2020-02-26   JavaScript  点击:(2)  评论:(0)  加入收藏
浏览器内核(渲染进程)浏览器的渲染进程是多线程的!包含了哪些线程(列举一些主要常驻线程):GUI渲染线程 负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。...【详细内容】
2020-02-24   JavaScript  点击:(10)  评论:(0)  加入收藏
标题你没看错,是JavaScript不是Java。 部分同学平时工作中还需要写下简单的前端,即使不写,这些文本编辑器你迟早也要用到。...【详细内容】
2020-02-05   JavaScript  点击:(2)  评论:(0)  加入收藏
一、JavaScript的诞生JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言 名字起源: Mocha->LiveScript->Jav...【详细内容】
2020-01-16   JavaScript  点击:(23)  评论:(0)  加入收藏
实际应用中,目标字符串的生成可能需要多个数据的拼接。  由于应用频繁,几乎是所有编程语言都必须掌握的操作,当然每种语言具有各自特点。  本文将通过代码实例详细介绍...【详细内容】
2019-12-25   JavaScript  点击:(29)  评论:(0)  加入收藏
2003 年,保罗&middot;格雷厄姆(Paul Graham) 曾撰文提到,他的公司决定使用 Lisp。在该文章中他将 Lisp 描绘成计算机语言界的法语,它独特、深邃,能够表达难以描述的事物。如果 Li...【详细内容】
2019-12-23   JavaScript  点击:(26)  评论:(0)  加入收藏
JavaScript 的节流和防抖已经是老生畅谈的问题了,对于前端行业技术大牛来讲不过是小菜一碟,而对于绝大多数前端小白或初级工程师,绝对是必备的知识,值得学习。接下来小郭就带大...【详细内容】
2019-12-23   JavaScript  点击:(25)  评论:(0)  加入收藏
算法是一种艺术,给人感觉很不好接近,但是一旦你和ta熟络了,你就能发现这门艺术的内在是多么美妙且多变。对于前端来说,算法也许不是最重要的,在日常工作中,几乎很少用到。所以很多...【详细内容】
2019-12-23   JavaScript  点击:(24)  评论:(0)  加入收藏
1. 全部替换我们知道 string.replace() 函数仅替换第一次出现的情况。你可以通过在正则表达式的末尾添加 /g 来替换所有出现的内容。var example = "potato potato"; cons...【详细内容】
2019-12-21   JavaScript  点击:(1)  评论:(0)  加入收藏
在前端的 JavaScript 开发中,发现开发者对于错误异常的处理普遍都比较简单粗暴,如果应用程序中缺少有效的错误处理和容错机制,代码的健壮性就无从谈起。本文整理出了一些常...【详细内容】
2019-12-19   JavaScript  点击:(25)  评论:(0)  加入收藏
或多或少我们都应该知道JavaScript,主要还是分为三部分:ECMAScript(核心),DOM(文档对象模型),BOM(浏览器对象模型)。 ECMAScript(核心):ECMAScript是一个语言标准,javascript则是基于...【详细内容】
2019-12-12   JavaScript  点击:(29)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条