一说起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的原型讲解的更多相关文章

  1. 史上最全的javascript知识点总结,浅显易懂。

    来源于:http://blog.csdn.net/qiushi_1990/article/details/40260471 一,认识javascript1-1为什么学习JavaScript一).你知道 ...

  2. Javascript系列之在HTML中使用JavaScript

    本文主要包括以下几方面内容: 1)使用<script>元素 2)嵌入脚本和外部脚本 3)文档模式对JavaScript的影响 4)考虑禁用JavaScript的场景 只要一提到把Javas ...

  3. python基础之Day7part2 史上最清晰字符编码理解

    二.字符编码 基础知识: 文本编辑器存取文件原理与py执行原理异同: 存/写:进入文本编辑器 写内容 保存后 内存数据刷到硬盘 取/读:进入文本编辑器 找到内容 从硬盘读到内存 notepad把文件内 ...

  4. 史上最全、JavaScript基础篇

    本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.fo ...

  5. 史上最详细的JavaScript事件使用指南

    事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流. 事件冒泡 IE的事件流叫做事件冒泡 ...

  6. 史上最全的JavaScript工作笔记

    /* * JavaScript查看对象函数 */ function resultTest( obj ){ var resultTest = ''; $.each(obj,function(key,va ...

  7. 史上最全 原生javascript的知识总结,适合新手及查资料用!

    适合右键另存为图片保存,再放大看!

  8. 妙味课堂史上最全的javascript视频教程,前端开发人员必备知识点,新手易学,拔高必备!!!

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

  9. (一)我的Javascript系列:Javascript的面向对象旅程(上)

    今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...

随机推荐

  1. 从客户端(Content="<p>测试</p>")中检测到有潜在危险的 Request.Form 值

    .NetFrameWork 4.0 Validaterequest="false"不起作用 要恢复到2.0的ASP.NET请求验证功能的行为,要在以下设置 Web.config中 ...

  2. 本地搭建PHP环境后进入应用失败

    进入localhost/wordpress或者其他应用,直接出现类似以下这种情况: 解决方法是修改tomcat的配置文件httpd.conf中: <IfModule dir_module> ...

  3. Easyui 异步树的实现

    网上最多的onBeforeExpand 可用,因为后台代码没写对导致树形结构重复加载数据 前端代码: <%@ page language="java" contentType ...

  4. 工具 cocoapods和插件

    命令行更新(安装)步骤 $ sudo gem update --system // 先更新gem,国内需要切换源 $ gem sources --remove https://rubygems.org ...

  5. yii2 框架的 save() 方法 执行模式条件。

     save() 方法会调用 insert() 和 update() 中的一个, 用哪个取决于当前 AR 对象是不是新对象(在函数内部,他会检查 yii\db\ActiveRecord::isNewRe ...

  6. 如何用python搞定验证码中的噪点

    背景:朋友在为"关山口男子职业技术学校"写一款校园应用,于是找MoonXue写一个学生选课系统的登录接口.为了搞定这个接口,不得不先搞定这个系统的验证码. 验证码大概是这个样子 看 ...

  7. HDU--杭电--1195--Open the Lock--深搜--都用双向广搜,弱爆了,看题了没?语文没过关吧?暴力深搜难道我会害羞?

    这个题我看了,都是推荐的神马双向广搜,难道这个深搜你们都木有发现?还是特意留个机会给我装逼? Open the Lock Time Limit: 2000/1000 MS (Java/Others)  ...

  8. 转-深入理解VMware虚拟网络

    原文出处:http://wangchunhai.blog.51cto.com/225186/381225 VMware Workstation是一款非常不错的虚拟机软件,许多爱好者用VMware Wo ...

  9. 面试复习(C++)之快速排序

    #include <iostream> using namespace std; void Quicksort(int *a,int low,int high) { if(low>h ...

  10. 【初级】linux pwd 命令详解及使用方法实战

    pwd:查看当前工作目录 前言: Linux中用 pwd 命令来查看”当前工作目录“的完整路径,就是经常提及的所在目录,多用在生产环境多级目录中查看当前所在路径,使用此命令能给运维人员/操作人员带来很 ...