深入理解JavaScript系列:史上最清晰的JavaScript的原型讲解
一说起JavaScript就要谈的几个问题,原型就是其中的一个。说了句大话,史上最清晰。本来是想按照大纲式的行文写一下,但写到后边感觉其实就一个概念,没有什么条理性,所以下面就简单按照概念解释的模式谈下这个问题。
1.JavaScript的原型是什么?
原型,首先他是个对象。和在以对象为核心的JavaScript这门语言中的其他普通对象来说一样,只不过他的角色有点特殊。但首先要明白他就是一个对象,是一个无序的属性和值的序列对。
2.谁会具有原型这个对象?
所有的对象(包括函数这个对象)在默认的情况下都有一个原型对象。这句话的理解就和普通对象中再嵌套拥有对象是一个意思。
因为原型本身也是对象,所以每个原型自身又有一个原型对象(属性继承就是这么来的)。照这句话下去的话会成为一个无限继承的模式,所以一定会有一个结束点。所以例外来了,当对象原型追溯到原型链的最顶端的时候,这个最顶端的位置也就是在这种层层向上的关系到了Object这个构造函数的prototype,Object函数的的prototype对象如下图:

从图中可以看到,Object的属性里已经没有了__proto__。至于什么是__proto__,下边会讲。
3.__proto__和prototype分别是指什么?
每一个对象都有一个__proto__对象属性,每一个函数(函数也是对象)都有一个 prototype对象属性,所以总结来说就是每一个对象有一个__proto__,而每一个函数都有一 个prototype,但同时他又是一个对象,所以函数也会有__proto__。
4.__proto__和prototype的关系是怎么样的?
首先明白对象是怎么来的?对象无非是构造函数构造出来的或者是字面直接量的形式。
构造出来的对象的__proto__指向构造该对象的构造函数的prototype;字面直接量的对象的__proto__指向该对象类型所对应的的构造函数的prototype。
总结来说就是对象的__proto__指向该对象所对应的构造函数的prototype。
5.不同函数的prototype分别是什么?
其实这是两个问题,第一先回答不同函数。
首先JavaScript中只要是函数,都可以用new关键字当作构造函数来使用。但是,有些函数是我们自己实现的,还有一些函数是JavaScript语言标准里已经规定内置实现的。这些函数包括Array、Boolean、Date、Number、String、RegExp、Math。这里会有一个问题就是Math他是一个对象而不是函数,你可以去typeof检测一下。除去Math之后剩余的这些内置构造函数的prototype属性也是语言内置实现的,比如Array里我们常用的那些pop、push、shift这些方法,都统统包括在Array这个构造函数的prototype对象属性里。除了上面提到的内置构造函数外,其余的函数都是我们自己定义的函数,他们也会有prototype属性,但是如果我们不显示的去给prototype赋值的话,他就是一个空对象。
接下来回答第二个问题,prototype是什么。
其实上面已经说的很清楚了,prototype是函数的一个固有属性,即只要是个函数都会有的属性,内置的构造函数已经有实现好的prototype,它里边包括各种方法或者属性。而我们自己实现的函数也必定会有一个prototype属性,但是如果我们不显示赋值的话,他就是一个空对象。
6.那我们所说的原型和原型继承到底是什么意思?
如果你一字不落的看完上边的所有概念而且能理解到80%以上,就应该很自然的得出这个问题的答案了。
我们一般所说的原型就是对象的原型,对象的原型是指_proto_这个对象。而所有的对象的继承也是通过他来实现的。第4个问答中已经很明确了,__proto__指向该对象的构造函数的prototype,而该对象的构造函数的prototype作为对象会拥有一个__proto__,而这个__proto__又指向他的构造函数的prototype,层层向上,直到__proto__指向Object这个最顶端的函数对象的prototype,也就是第二条的图所示的便结束。
如上便是JavaScript通过原型继承的一个解释。
总结:我们该怎么掌握原型这个概念。
掌握一个东西,无非也就是 是什么,怎么样,怎么用这三点。
是什么。
首先明白__proto__和prototype,对象都会有__proto__,包括函数对象,函数对象除了__proto__,还拥有prototype。
原型是一个对象,指__proto__,每个对象都会拥有这个属性。__proto__指向该对象构造函数的prototype。__proto__的层层向上追溯的过程就是继承的过程,直到追溯到最顶端即Object这个构造函数的prototype。
怎么样。
怎么样也就是为什么的意思,原型之所以存在,是基于JavaScript这门语言的面向对象思想来说的。像其他语言都会有OO和继承等这些特性,JavaScript虽为脚本语言,灵活却不失功用,这个是他实现面向对象和继承的一个思想。可以简单的理解为此。
怎么用。
这个是个很大的话题,可以另开一篇文章来阐述。这里只是简单的举几个例子。
如果仅仅只是因为为了给一个实例添加属性而使用原型是没有多大意义的,这和直接添加属性到这个实例是一样的,假如我们已经创建了一个实例对象 ,我们想要继承一个已经存在的对象的功能比如说Array,我们可以像下面这样做:
var a = [1, 2];
a.__proto__ = Array.prototype;
console.log(a.length); //2
又比如我们自己实现了一个构造函数,上面已经说到,自己实现的函数的默认prototype是一个空对象,所以由这个构造函数创建生成的对象的__proto__指向的是一个空对象。我们这时候就可以用prototype来继承或者实现一些事情。
var MyFun = function (x, y) {
this.x = x;
this.y = y;
};
MyFun.prototype.getArea = function () {
return this.x * this.
}
var obj = new MyFun(2, 3);
var area = obj.getArea();
console.log(area); //6
写完才发现,可能这是史上最不清晰的阐述。但如果你对原型已经有了一知半解却还是有点模糊的话,好好的从头读到结尾,你会发现,原来掌握这个概念也是这么简单。
完!祝好运。
深入理解JavaScript系列:史上最清晰的JavaScript的原型讲解的更多相关文章
- 史上最全的javascript知识点总结,浅显易懂。
来源于:http://blog.csdn.net/qiushi_1990/article/details/40260471 一,认识javascript1-1为什么学习JavaScript一).你知道 ...
- Javascript系列之在HTML中使用JavaScript
本文主要包括以下几方面内容: 1)使用<script>元素 2)嵌入脚本和外部脚本 3)文档模式对JavaScript的影响 4)考虑禁用JavaScript的场景 只要一提到把Javas ...
- python基础之Day7part2 史上最清晰字符编码理解
二.字符编码 基础知识: 文本编辑器存取文件原理与py执行原理异同: 存/写:进入文本编辑器 写内容 保存后 内存数据刷到硬盘 取/读:进入文本编辑器 找到内容 从硬盘读到内存 notepad把文件内 ...
- 史上最全、JavaScript基础篇
本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.fo ...
- 史上最详细的JavaScript事件使用指南
事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流. 事件冒泡 IE的事件流叫做事件冒泡 ...
- 史上最全的JavaScript工作笔记
/* * JavaScript查看对象函数 */ function resultTest( obj ){ var resultTest = ''; $.each(obj,function(key,va ...
- 史上最全 原生javascript的知识总结,适合新手及查资料用!
适合右键另存为图片保存,再放大看!
- 妙味课堂史上最全的javascript视频教程,前端开发人员必备知识点,新手易学,拔高必备!!!
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- (一)我的Javascript系列:Javascript的面向对象旅程(上)
今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...
随机推荐
- 简述alert和console.log的区别
生活中还是得有发现美好和差别的眼睛~~ 学习前端那么久既然还不知道alert和console.log的差别~~~~ 蓝瘦,香菇~~~ 本菜鸟一直以为alert和console.log其实是一样的用法, ...
- jquery 跨域访问问题 转
http://zld406504302.iteye.com/blog/1677937 服务器,jsp <%@ page language="java" contentType ...
- Seajs教程 配置文档
seajs.config Obj alias Obj 别名配置,配置之后可在模块中使用require调用require('jQuery'); seajs.config({ alias:{ 'jquer ...
- IOS跳转到设置特定项
App如何跳转到系统Settings 标签: IOS开发App转到Settings 2015-12-04 15:56 550人阅读 评论(1) 收藏 举报 分类: IOS开发(21) 版权声明:本 ...
- XML 详解
import urllib import requests from xml.etree import ElementTree as ET root = ET.XML(open('D:\E\seman ...
- 转-squid介绍及其简单配置
本文原始出处:http://linuxme.blog.51cto.com/1850814/372960 1.Squid是什么? Squid中文权威指南:http://zyan.cc/book/squi ...
- 封装获取dom元素
<script> //函数: 反复执行的代码块 //全局只有一个对象,防止全局变量污染 var itcast = { getElen : { tag : function(tag){ re ...
- 设置dos窗口的背景色与前景色
在dos中输入help会列出各种命令,其中有一个color命令可以用来设置当前窗口的前景色和背景色,输入help color会列出使用方法,内容如下: 设置默认的控制台前景和背景颜色. COLOR [ ...
- 针对不同浏览器,CSS如何写
我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6.微软IE7.微软IE8.火狐浏览器.谷歌浏览器有一些不同,如宽度.高度等地方有相差误.IE6比较老的版本浏览 ...
- 一次线上http接口调用不通相关的解决过程
2016-05-25 08:58:34 昨天线上小白系统因为调用外部http接口,超时不释放,导致页面反应很慢,时间一长,报502错误. 上网查了下,502错误是因为服务对于客户的请求没有得到及时的反 ...