要了解原型和原型链,首先要理解普通对象和函数对象。

一、普通对象和函数对象的区别

  在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码:

function f1(){};
var f2 = function(){};
var f3 = new function(){}; var o1 = {};
var o2 = new Object();
var o3 = new f1(); console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object

在上面的代码中可以看出,f1、f2和f3都是函数对象,而o1,o2和o3都是object对象,也就是普通对象,函数对象本质就是由new function()构造而来,其他的都是普通对象;函数对象和普通对象理解之后,后文会说明两者的区别。

二、原型

在JavaScript中,原型也是一个对象,原型的作用,则是实现对象的继承。

在js的所有函数对象中,都存在一个属性prototype,该属性对应当前对象的原型。

而所有的JavaScript对象,都存在一个_proto_属性(由于_proto_是个非标准属性,因此只有ff和chrome两个浏览器支持,标准方法是Object.getPrototypeOf()),_proto_属性指向实例对象的构造函数的原型,理解起来就如下:

var p = new Person();

console.log(p._proto === Person.prototype)//true

从上面代码可以看出,p是实例对象,Person是p的构造函数,可以看出来p的_proto_属性指向构造函数Person的原型。

下面用代码来解释一下js是如何通过原型进行继承的:

var parent = function(name){
this.name = name;
} parent.prototype.getName = function(){
return this.name;
} var son = new parent("huahua"); console.log(son.getName());//'huahua'

显然,son继承了parent的原型中的函数属性getName。

三、原型链

除开Object的prototype的原型是null以外,所有的对象和原型都有自己的原型,对象的原型指向原型对象。

在层级多的关系中,多个原型层层相连则构成了原型链。

在查找一个对象的属性时,倘若在当前对象找不到该属性,则会沿着原型链一直往上查找,知道找到为止,如果到了原型链顶端,还没找到,则返回undefined。

四、constructor 

constructor是构造函数创建的实例的属性,该属性的作用是指向创建当前对象的构造函数。

例如,son.constructor == parent;//true

深入JS原型与原型链的更多相关文章

  1. Js 原型和原型链

    Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...

  2. 【repost】JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  3. JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  4. JS原型与原型链终极详解(转)

    JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...

  5. 总结一下js的原型和原型链

    最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...

  6. JS原型和原型链

        1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...

  7. JS对象、原型链

    忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...

  8. JS面向对象之原型链

      对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...

  9. JS 原型与原型链

    图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...

随机推荐

  1. 一次php涉及跨域功能的麻烦及解决方案

    一,功能及描述 1,在后台管理网站(php)admin.xxx.com(以下简称admin),上拉取并编辑aaa.xxx.com(php,以下简称aaa)上的图片及文件 2,file_get_cont ...

  2. Less合并

    合并是LESS的一个特性,它允许通过指定的语法来为某个属性添加使用逗号或空格分隔的值的列表.对于文本阴影.盒阴影.背景.变换等允许使用值的列表的属性,合并非常有用. 合并的语法,就是在属性名称和冒号之 ...

  3. ShoneSharp语言(S#)的设计和使用介绍系列(3)— 修炼工具

    ShoneSharp语言(S#)的设计和使用介绍 系列(3)- 修炼工具 作者:Shone 声明:原创文章欢迎转载,但请注明出处,https://www.cnblogs.com/ShoneSharp. ...

  4. SolrJ 复杂查询 高亮显示

    SolrJ 复杂查询 高亮显示 上一章搭建了Solr服务器和导入了商品数据,本章通过SolrJ去学习Solr在企业中的运用.笔者最先是通过公司的云客服系统接触的Solr,几百万的留言秒秒钟就查询并高亮 ...

  5. (高级篇)php结合redis实现高并发下的抢购、秒杀功能

    抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个:1 高并发对数据库产生的压力2 竞争状态下如何解决库存的正确减少("超卖"问题)对于第一个问题,已经很容易想到用缓存 ...

  6. javascript中break,continue和return语句用法小结:

    Break语句会使程序立刻退出包含在最底层的循环或者退出一个switch语句,它是用来退出循环或者switch语句. 例如: <script type="text/javascript ...

  7. jQuery的$.ajax方法响应数据类型有哪几种?本质上原生ajax响应数据格式有哪几种,分别对应哪个属性?

    jQuery的$.ajax方法响应数据类型有:xml.html.script.json.jsonp.text 本质上原生ajax响应数据格式只有2种:xml和text,分别对应xhr.response ...

  8. SketchMaster 隐私政策

    隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...

  9. Python中创建ndarrary的20中方法

    本文完整示例:完整示例代码 本文介绍了基础的.常用的创建ndarrary的多种方法,附带示例代码. 一.通过ndarray创建 import numpy as np 1.1 一维数组 a = np.a ...

  10. 41.Linux应用调试-修改内核来打印用户态的oops

    1.在之前第36章里,我们学习了通过驱动的oops定位错误代码行 第36章的oops代码如下所示: Unable to handle kernel paging request at //无法处理内核 ...