新人学习Javascript,其中的原型链一直是云里雾里,不得要领,查了很多相关资料,觉得这遍讲得最为清晰易懂,特转载分享,共同学习。

1. JavaScript内置对象

所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用。例如Array String 等等。JavaScript一共有12内置对象

其中10个函数类型( String,Number,Boolean,Array,Function,Date,RegExp,Error,Object,Event )函数类型 有 __proto__和 prototype 属性

2个对象类型(Math,JSON) 对象类型只有__proto__属性。

下面有一张图片 由苏仔提供。

2. 感性认识JS里的“德罗斯特效应”之原型链

打开浏览器的控制面板,随便输入一个JS内置的构造器函数,比如Array,控制台输出的是一个名为Array的函数体,这好像并没有什么稀奇的,但是,当你接着输入Array.prototype,控制面板输出了一堆我们经常用到的Array构造器的方法,把目光转移到最下方,有一个叫__proto__的属性,好奇的点开。列表列出的不是Object构造器的方法么,里边有我们非常熟悉的hasOwnProperty还有toString等方法。如果Array是构造器,那么控制面板输出的Array.prototype的所有属性中constructor又是什么构造器?点开看看,之后就像身处德罗斯特效应中一样,__proto__和constructor,还有Array构造器中常用的方法名不断的出现,一层套一层,一层层展开,没有尽头。。。

怎么证明 你是你?

拿Array举例,Array.prototype中有一个constructor属性,这个属性的值就是Array构造器自己。 所以我在console里面测试

(每一个构造函数都有)

2、“遗传进化链__proto__”,怎么证明一切皆对象?

所有的JS内置构造器都本是对象。可是从什么线索开始向过去前进呢,原型链(我给他起了一个名字叫遗传进化链)就是突破口。所有JS构造器(当然不止构造器有)都有一个__proto__属性,这是原型链指针,指向遗传进化成它的“那个”。它“遗传”了“那个”的特性,而又进化出了它自有的特性。

这里Array 是内置对象且是函数类型。所以Array有__proto__属性 指向的是函数类型 (function(){})。所以当我们在输出Array.__proto__.proto__;就会返回对象类型(Object{}).但是再向上就null。因为Object就是父类了。所有的继承自Object。

JS内置构造器其中之一的Array原本就是一个函数,而这个函数就是Function的prototype,所以Function.prototype有的方法,JS内置构造器都有,比如call()、apply()、bind()等(其实我们自定义的函数也是继承自Function.prototype,所以我们自己也可以定义构造器)。而Function.prototype的进化链指针又指向了Object.prototype。

3、怎么证明到头来一切都是空?

4、怎么证明所有JS内置构造器和自定义函数都是Function构造器的原型(prototype)。

10个函数类型构造器的进化链指针__proto__指向Function构造器的原型.

这里需要注意所有构造器的prototype都是对象(object)类型,只有Function.prototype是函数(function)类型,这是为了保证函数构造器们的__proto__指向的都是函数。

3. JSON和Math

JS内置的构造器函数都可以使用new关键字实例化一个对象,我们称实例化后的这个对象就是某某构造器的一个实例。就像我们每一个“人”都是“人类”这个构造器函数的一个实例。

我们试试JSON 和Math 能不能实例化对象。

不可以。JSON和Math不是构造器函数,他们是普通的对象。

只有构造器函数才能使用new 关键字实例化一个对象,而JSON和Math已经是对象了,所以我们可以不用实例化直接使用JSON和Math中的属性和方法~~(我们实例化的目就是想用实例化后的对象里的属性和方法,那么既然JSON和Math已经是对象了,就省去实例化的操作 直接使用静态方法。

所以JSON和Math不属于10个构造器函数,但他们12个共同属于Javascript的内置对象。

4. __proto__进化链指针设计为什么如此重要

javascript中为什么会有__proto__原型链的设计。

先实例化一个String对象并将其赋值给str这个变量,然后我们输出这个str

从str输出的内容来看,str有四个属性,分别是0、1、2、length。

但是 str.charAt(0); // l

str里面没有charAt()方法 但是没有报错。这是因为str的进化链上存在这个属性方法,那么charAt()这个方法在进化链的那个节点上呢。

原来String.prototype拥有charAt这个方法,而str的__proto__指针指向String.prototype。str.__proto__.__proto__指向的对象所拥有的属性str也都可以直接用

看到str.__proto__.__proto__指向的对象所拥有的属性中有一个hasOwnProperty属性方法了么,str可以直接使用这个属性方法 在验证之前先说下str.__proto__.__proto__指向了谁?指向的是Object的prototype属性。

Object.prototype.hasOwnProperty()属性方法用来检验一个对象是否自己拥有一个属性而非通过进化链__proto__继承来的属性。

Javascript之傻傻理不清的原型链、prototype、__proto__的更多相关文章

  1. js 原型链 prototype __proto__

    1.说明 函数(Function)才有prototype属性,对象(除Object)拥有__proto__. 2.prototype与__proto__区别 示例: <!DOCTYPE html ...

  2. JavaScript原型链:prototype与__proto__

    title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...

  3. 原型和原型链 prototype和proto的区别

    原型 原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性 prototype是函数下的属性,对象想要查看原型使用隐式属性__Prot ...

  4. 玩转JavaScript OOP[3]——彻底理解继承和原型链

    概述 上一篇我们介绍了通过构造函数和原型可以实现JavaScript中的“类”,由于构造函数和函数的原型都是对象,所以JavaScript的“类”本质上也是对象.这一篇我们将介绍JavaScript中 ...

  5. javascript基础修炼(1)——一道十面埋伏的原型链面试题

    在基础面前,一切技巧都是浮云. 题目是这样的 要求写出控制台的输出. function Parent() { this.a = 1; this.b = [1, 2, this.a]; this.c = ...

  6. 深入理解JavaScript原型:prototype,__proto__和constructor

    JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念, ...

  7. javascript作用域、闭包、对象与原型链

    原文作者总结得特别好,自己收藏一下.^-^ 1.作用域1.1函数作用域JS的在函数中定义的局部变量只对这个函数内部可见,称之谓函数作用域.它没有块级作用域(因此if.for等语句中的花括号不是独立作用 ...

  8. 大白话通俗易懂的讲解javascript原型与原型链(__proto__、prototype、constructor的区别)

    javascript原型和原型链是js中的重点也是难点,理论上来说应该是属于面向对象编程的基础知识,那么我们今天为什么要来讲这个呢?(因为我也忘了,最近看资料才揭开面纱……  哈哈哈) 好了,直接进入 ...

  9. Javascript作业—数组去重(要求:原型链上添加函数)

    数组去重(要求:原型链上添加函数) <script> //数组去重,要求:在原型链上添加函数 //存储不重复的--仅循环一次 if(!Array.prototype.unique1){ A ...

随机推荐

  1. Dart类型变量-表示信息

    Dart执行入口 Dart要求以main函数作为执行的入口 Dart的变量和类型 在Dart中可以用var或者具体的类型来声明一个变量.当使用var定义变量时,表示类型是由编译器推断决定.使用静态类型 ...

  2. jenkins在windows上自动化部署.Net(.Net Core)项目

    前言 什么是持续集成呢?Continuous integration(CI).持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员至少集成一次,也就意味着每天可能会发生多次集成. ...

  3. 是的,是你的BFC - CSS中常用

    是的,是你的BFC - CSS中常用     是的,是你的BFC - CSS中常用 CFC 全称:(Block Formatting Contexts)含义是块级格式化上下文),就是一个块级元素的渲染 ...

  4. jenkins之插件下载方法

    jenkins插件下载方法有两种,在线下载和离线下载方式 在线下载 就是在安装好了jenkins之后,进入jenkins的插件管理页面,搜索想要的插件,点击安装即可 例如:安装git插件 问题:有时候 ...

  5. linux系统下开发环境安装与配置

    安装系统环境 CentOS 6.8 64位 jdk版本 7u80 64位 Tomcat版本 Tomcat7 maven版本 Apache Maven 3.6.0 vsftpd版本 vsftpd-2.2 ...

  6. 构建之法——homework4

    手机应用——软件腾讯QQ: QQ是腾讯公司开发的一款基于Internet的即时通信软件.最初通过在线广告进行盈利(Banner广告.Email广告等).然后通过免费注册QQ,获取大量用户.开发QQ相关 ...

  7. java-整型数值 用 16进制转换、2进制转换-Integer.toHexString

    负数为什么要用补码表示 可以将符号位和其它位统一处理 减法也可按加法来处理 另外,两个用补码表示的数相加时,如果最高位(符号位)有进位,则进位被舍弃 正数:原码.反码.补码相同. 负数:反码符号位不变 ...

  8. SD-WAN 配置及应用模板**(二)

    目录 0. 前言 1. 配置模板 1.1 创建各类 'Feature' 模板: 1.1.1 添加波特率模板 1.1.2 添加 'VPN0' 模板 1.1.3 添加 'VPN10' 模板 1.1.4 添 ...

  9. selenium实现百度图片爬取

    因为是百度图片是瀑布流ajax异步上传的数据,所以这里用到抓包工具来抓取链接(fiddler) 好了直接上代码, from selenium import webdriver from seleniu ...

  10. 『TensorFlow2.0正式版』TF2.0+Keras速成教程·零:开篇简介与环境准备

    此篇教程参考自TensorFlow 2.0 + Keras Crash Course,在原文的基础上进行了适当的总结与改编,以适应于国内开发者的理解与使用,水平有限,如果写的不对的地方欢迎大家评论指出 ...