• js javascript 原型链详解


    看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己

    首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了产生一个类的实例对象,然后利用对象来进行操作,当然,在js身上也有高级语言的一些影子,它也配套了new的关键字下面看一下代码

    //声明一个类
    function Person(name){
        this name = name;
    }
    
    //创建一个Person的实例zzh
    var zzh = new Person("zzh");
    

    这里出现了new 的关键字,现在看起来,和高级语言中的new 没什么太大的区别,下面我们看一下new关键字其实做了哪些工作

    其实总的来说,js 里的new 就只做了三步工作:
    1、先让上面的zzh变量指向堆里的一个空对象

    var zzh = {};
    

    2、让zzh指向的这个对象的_proto_属性去指向Person类的prototype属性所指向的对象

    zzh._proto_ = Person.prototype;
    

    3、最后让zzh来执行Person的方法

    Person.call(zzh);
    

    是不是有点绕,没关系,我们来看一下这个流程图,凡事都要用图来说话嘛


    这样看上去是不是清晰了很多,其实new涉及的正是我们今天要谈的原型链继承


    下面我们来看一下原型链
    什么是原型链?
    看下面这个代码.

    alert(zzh._proto_);//[object Object]
    

    我们可以看到这里它返回了一个对象,而这个对象正是Person.prototype指针指向的那个对象.


    如果这样还不清楚那我们换种方式

    function Person(name){
    	this.name = name;
    }
    Person.prototype.talk = function(){
    	//
    	alert("i'm talking");
    };
    var zzh = new Person("zzh");
    zzh.__proto__.talk();//"i'm talking"
    

    我们发现它打印了"i'm talking",这样就很显而易见了, 实例的_proto_属性正是访问到了Person的prototype所指向的那块内存

    下面大家看一下这个图

    这就是一个原型链,而这个链的顶端就是null,object的prototype的_proto_指向的是null,所以我们说object的原型对象就是整个原型链的顶端
    另外:
    Function的_proto_指向的是它自己的原型

    alert(Function._proto_ == Function.prototype);//true
    

    Function的原型的_proto_又指向Object的原型

    alert(Function.prototype._proto_ == Object.prototype);//true
    

    而Object的_proto_指向的是Function的原型对象

    alert(Object._proto_ == Function.prototype);//true
    

    这样看来就很绕,Function和Object都由Function创建,而Function的原型又由Object的原型创建。
    我们说万事万物皆对象嘛,所以说Function的原型是一个对象没有错
    而对象又由函数创建,因为js里的函数既是方法又是该类的构造器,这点也不冲突,所以,这也完全解释的通。


    看一个不怎么绕的图

    我相信看到这里一定就对原型链有一个了解了

    如果博文中出现什么错误,来来来,板砖朝这拍!

  • 相关阅读:
    FULL JOIN 与 CROSS JOIN
    [MSDN] GROUP BY (Transact-SQL)
    T-SQL 函数概述
    SELECT TOP column FROM table [ORDER BY column [DESC]]
    NOT 运算符
    SQL Server 模式和名称解析
    [转]Sql Server 2005中的架构(Schema)、用户(User)、登录(Login)和角色(Role)
    深入理解Java内存(图解)
    clickhouse 安装部署(linux)
    DBeaver通过phoenix连接云主机的hbase
  • 原文地址:https://www.cnblogs.com/haodawang/p/5967275.html
Copyright © 2020-2023  润新知