史上最清晰的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

  写完才发现,可能这是史上最不清晰的阐述。但如果你对原型已经有了一知半解却还是有点模糊的话,好好的从头读到结尾,你会发现,原来掌握这个概念也是这么简单。

  完!祝好运。

时间: 2024-10-05 09:33:55

史上最清晰的JavaScript的原型讲解的相关文章

史上最全、JavaScript基础篇

索宁 Hot summer nights mid July, when you and  I were forever wild. 首页 新随笔 联系 管理 随笔 - 12  文章 - 5  评论 - 19 史上最全.JavaScript基础篇 本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.for in.while.do-while) label语

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

事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流. 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档):如下代码: <div id = "div"> <span id="span"> <a id="aTag">事件测试</

史上最清晰的红黑树讲解(上)

http://www.cnblogs.com/CarpenterLee/p/5503882.html 本文以Java TreeMap为例,从源代码层面,结合详细的图解,剥茧抽丝地讲解红黑树(Red-Black tree)的插入,删除以及由此产生的调整过程. 总体介绍 Java TreeMap实现了SortedMap接口,也就是说会按照key的大小顺序对Map中的元素进行排序,key大小的评判可以通过其本身的自然顺序(natural ordering),也可以通过构造时传入的比较器(Compara

史上最清晰明了的ndk编译方法

可能很多android开发者都去尝试过ndk编译,但是在windows下面搭建环境是多么的麻烦,想必都有体会,今天记录一下目前研究的最简单的方法 1.首先下载安装ndk编译环境 http://gl.paea.cn/contents/6c5aa5daf49d3daa.html 红孩儿工具箱的集成cocos2dx开发环境安装,装好以后配置计算机高级环境配置里面的path  比我的ndk路径  D:\cocos2dx64\NDK 2.创建android  demo 后面会附上源码demo 资源地址如下

史上最牛逼的javascript俄罗斯方块,63行代码搞定啊

<!doctype html><html><head></head><body> <div id="box" style="width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div> <script>

史上自定义 JavaScript 函数Top 10

史上自定义 JavaScript 函数Top 10 http://www.dustindiaz.com/top-ten-javascript/ 发布:wpulog | 发布时间: 2010年4月9日 10个被使用的最普遍的用户自定义函数,addEvent(),addLoadEvent(),getElementsByClass(),getCookie(),setCookie(), deleteCookie()等. 10) addEvent() function addEvent(elm, evTy

深刻理解JavaScript基于原型的面向对象

主题一.原型 一.基于原型的语言的特点 1 只有对象,没有类;对象继承对象,而不是类继承类. 2  "原型对象"是基于原型语言的核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己创建时和运行时定义的属性,而且可以享有原型对象的属性. 3 除了语言原生的顶级对象,每一个对象都有自己的原型对象,所有对象构成一个树状的层级系统.root节点的顶层对象是一个语言原生的对象,其他所有对象都直接或间接继承它的属性. 显然,基于原型的语言比基于类的语言简单得多,我

史上最全的开发和设计资源大全

史上最全的开发和设计资源大全2016-08-09 技术最前线链接:blog.jobbole.com/104313GitHub 上的 Awesome 系列(资源大全系列),是一个汇总了优秀工具资源的大集合,并由 GitHub 社区用户持续维护和更新.初始的版本都是英文,伯乐在线组织整理了热门资源大全的中文版.目前,中文版的资源列表在 GitHub 总计已经有超过 10,000 star 和 数千 fork .以下是各个开发和设计资源的详细介绍. Java 资源大全 Java资源大全中文版,包括:构

Android事件分发机制详解:史上最全面、最易懂

前言 Android事件分发机制是每个Android开发者必须了解的基础知识 网上有大量关于Android事件分发机制的文章,但存在一些问题:内容不全.思路不清晰.无源码分析.简单问题复杂化等等 今天,我将全面总结Android的事件分发机制,我能保证这是市面上的最全面.最清晰.最易懂的 本文秉着"结论先行.详细分析在后"的原则,即先让大家感性认识,再通过理性分析从而理解问题: 所以,请各位读者先记住结论,再往下继续看分析: 文章较长,阅读需要较长时间,建议收藏等充足时间再进行阅读 目