脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS原型与原型链

JS原型与原型链的深入理解

 更新时间：2017年02月15日 09:59:10   作者：落落月  
这篇文章主要和大家一起深入理解JS原型与原型链，原型是JavaScript中一个比较难理解的概念，本文为大家解决这个难题，感兴趣的小伙伴们可以参考一下

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

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

在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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Flex通过JS获取客户端IP和计算机名的实例代码

    Flex通过JS获取客户端IP和计算机名的实例代码

    这篇文章主要介绍了Flex通过JS获取客户端IP和计算机名的实例代码，有需要的朋友可以参考一下
    2013-11-11
  • 超精准的javascript验证身份证号的方法

    超精准的javascript验证身份证号的方法

    这篇文章为大家分享了一个超精准的javascript验证身份证号的具体实现方法，根据身份证号对其进行性别的判定，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 微信小程序实现搜索历史功能

    微信小程序实现搜索历史功能

    这篇文章主要为大家详细介绍了微信小程序实现搜索历史功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 微信小程序入口场景的问题集合与相关解决方法

    微信小程序入口场景的问题集合与相关解决方法

    这篇文章主要介绍了微信小程序入口场景的问题集合与相关解决方法,从零开始开发一个小程序，大多数坑点都是在微信小程序的各个入口场景处。所以这里整理一下微信小程序的各个入口场景会面临的问题以及解决方案,需要的朋友可以参考下
    2019-06-06
  • JavaScript中的全局对象介绍

    JavaScript中的全局对象介绍

    这篇文章主要介绍了JavaScript中的全局对象介绍,对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用,需要的朋友可以参考下
    2015-01-01
  • 通过JavaScript实现动态圣诞树详解

    通过JavaScript实现动态圣诞树详解

    这篇文章主要为大家介绍几个好看的基于HTML+CSS+JS的圣诞树，希望圣诞节那天圣诞老爷爷能把我喜欢的你塞到我床上。感兴趣的小伙伴可以跟随小编一起学习一下
    2021-12-12
  • JavaScript定时器原理详解

    JavaScript定时器原理详解

    这篇文章主要介绍了JavaScript定时器原理,setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数,文章围绕JavaScript定时器相关资料展开以下内容,需要的朋友可以参考一下
    2021-12-12
  • JSON.parse 解析字符串出错的解决方法

    JSON.parse 解析字符串出错的解决方法

    程序中很多数据是动态拼接而成的json数据，最近在用json的时候老是现JSON.parse错误
    2010-07-07
  • 推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)

    推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)

    这篇文章主要介绍了推荐阅读的js快速判断IE浏览器(兼容IE10与IE11),因为ie11取消了很多低版本的判断，很多js都需要修改了，这里简单介绍下需要的朋友可以参考下
    2015-12-12
  • javascript中使用正则计算中文长度的例子

    javascript中使用正则计算中文长度的例子

    这篇文章主要介绍了javascript中使用正则计算中文长度的例子,需要的朋友可以参考下
    2014-04-04

最新评论