zoukankan      html  css  js  c++  java
  • 深入JS原型与原型链

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

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

      在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

  • 相关阅读:
    Ubuntu JDK 安装及环境配置
    流式计算之Storm简介
    Amcharts 提示 字体找不到解决方法
    Amcharts 入门教程
    JavaMail 发送邮件简单 Demo
    JavaMail 发送邮件,以及sina、163、QQ服务器不同的解析结果(附图)
    MyEclipse 搭建 hadoop 环境
    淘宝主搜索体验
    【转】Net中VSS实现版本控制管理的一些使用方法
    IIS配置PHP环境(快速最新版)
  • 原文地址:https://www.cnblogs.com/Yoriluo/p/6399570.html
Copyright © 2011-2022 走看看