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

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

相关文章

  • JS实现点击按钮可实现编辑功能

    JS实现点击按钮可实现编辑功能

    本文通过一段实例代码给大家介绍了基于js实现点击按钮可编辑效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的的朋友参考下吧
    2018-07-07
  • JavaScript闭包和回调详解

    JavaScript闭包和回调详解

    本文主要讲解了JavaScript闭包和回调,闭包的概念和特性,结合实例分析了使用步骤与方法
    2017-08-08
  • javascript匀速运动实现方法分析

    javascript匀速运动实现方法分析

    这篇文章主要介绍了javascript匀速运动实现方法,结合实例形式分析了JavaScript匀速运动的具体实现步骤与相关注意事项,需要的朋友可以参考下
    2016-01-01
  • JavaScript 字符串常用操作小结(非常实用)

    JavaScript 字符串常用操作小结(非常实用)

    这篇文章主要介绍了JavaScript 字符串常用操作的知识,包括字符串截取,查找类的方法,对js字符串操作相关知识感兴趣的朋友一起学习吧
    2016-11-11
  • IE下Ajax缓存问题的快速解决方法(get方式)

    IE下Ajax缓存问题的快速解决方法(get方式)

    IE下Ajax缓存问题的快速解决方法(get方式)。网上搜了很多解决方案,一大把,下面是我认为比较全面的解决方案。主要分为客户端解决和服务端解决
    2014-01-01
  • Javascript Worker子线程代码实例

    Javascript Worker子线程代码实例

    这篇文章主要介绍了Javascript Worker子线程代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • Bootstrap+jfinal实现省市级联下拉菜单

    Bootstrap+jfinal实现省市级联下拉菜单

    这篇文章主要为大家详细介绍了Bootstrap+jfinal实现省市级联下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript中的异常捕捉介绍

    JavaScript中的异常捕捉介绍

    这篇文章主要介绍了JavaScript中的异常捕捉介绍,本文讲解了throw语句抛出异常,try/catch/finally语句捕捉异常,需要的朋友可以参考下
    2014-12-12
  • webpack公共组件引用路径简化小技巧

    webpack公共组件引用路径简化小技巧

    日常开发中,我们会常常把一些功能提取出来,包装成一个公共模块或者组件.这篇文章主要介绍了webpack公共组件引用路径简化小技巧,非常具有实用价值,需要的朋友可以参考下
    2018-06-06
  • JavaScript鼠标拖拽事件详解

    JavaScript鼠标拖拽事件详解

    这篇文章主要为大家详细介绍了JavaScript鼠标拖拽事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04

最新评论