zoukankan      html  css  js  c++  java
  • 关于构造函数,实例,原型对象一纯手工的理解

    TO DO: 大学刚入门学前端的时候,一学姐和我说,你不需要去记住所有规则,但是你需要知道在遇到问题时哪个规则可用。确实,越往后走感觉很多东西模棱两可,就好像小时候背单词一样,背了又忘。

    啰嗦一大堆,进入正题吧(PS: 全程没什么基本概念性的陈述,只是一些我个人比较感兴趣的东西的记录)

    首先来一张基本图:

    一开始就对这个_proto_比较感兴趣,基本类型和引用类型的_proto_属性如下:

    关于基本类型

    String:
    var a = 'test'
    a._proto_ === String.prototype
    
    number:
    var b = 1
    b._proto_ === Number.prototype

    Boolean:
    var c = true
    c._proto_ === Boolean.prototype

    至于undefined 和 null 是没有_proto_属性的,不信你们自己试试,哈哈,我也是才发现,以前没怎么注意

    关于引用类型

    Object:
    var apple = {}
    apple._proto_ === Object.prototype
    
    Array:
    var arr = {}
    arr._proto_ === Array.prototype
    
    Date:
    var date = new Date()
    date._proto_ === Date.prototype
    
    RegExp:
    var exp = new RegExp()
    exp._proto_ === RegExp.prototype

    然后来一波关于instanceof的理解(写的顺序是按自己所需来写的,不能帮助到看这篇文章的请见谅,待我以后写东西的水平提高了点,我再来重新修改)

    instanceof,是用来检测对象类型的

    那么它的原理是按照什么样的规则来检测的

    查看对象apple的[[prototype]]链上是否存在其构造函数的prototype属性。如果在,则返回true,还是代码理解这句话吧

    var apple = new Object()
    apple._proto_ === Object.prototype

    上面的两边值相等:
    所以 console.log(apple instanceof Object) // true

    再来一个:
    var list = new Array()
    list._proto_ === String.prototype

    所以 console.log(list instanceof String) // true

    又 String.prototype._proto_ === Object.prototype
    即 list._proto_._proto_ === Object.prototype
    所以 console.log(list instanceof Object) // true

    这两个案例下来,应该大家有感受到其中的规律的了吧,就是顺着值的原型链找

    写了大致的规则后,就来个大统一吧:

    关于基本类型

    String: 
    var
    a = '1' console.log(a instanceof String) // false
    Number: var b = 1 console.log(b instanceof Number) // false
    Boolean: var c = true console.log(c instanceof Boolean) // false

    undefined和null这两种数据类型,instanceof检测不出啥

    前面三种我开始再控制台打印过(全部为true):
    a._proto_ === String.prototype
    b._proto_ === Number.prototype
    c._proto_ === Boolean.prototype
    问题来了,那么为啥instanceof检测出来为false了,我目前的理解是是浏览器自动转换的,所以等式成立,这也是instanceof检测基本数据类型根本没啥意义的原因。

     关于引用类型

    Object:
    var a = new Object()
    a._proto_ === Object.prototype
    console.log(a instanceof Object)     //true
    
    Array(Date, RegExp规则同Array): 
    var b = new Array()
    b._proto_ === Array.prototype
    console.log(b instanceof Array)     // true
    b._proto_._proto_ === Object.prototype
    console.log(b instanceof Object)   // true

    关于原生构造函数

    Object:
    Object._proto_ === Function.prototype
    console.log(Object instanceof Function)    // true
    Object._proto_._proto_ === Object.prototype
    console.log(Object instanceof Object)      // true

    Function:
    Function._proto_ === Function.prototype
    console.log(Function instanceof Function) // true
    Function._proto_._proto_ === Object.prototype
    console.log(Function instanceof Object) // true String: String._proto_ === Function.prototype console.log(String instanceof Function) // true String._proto_._proto_ === Object.prototype console.log(String instanceof Object) // true

    其他原生构造函数同上String

    自定义构造函数

    function Fn() {};
    var a = new Fn();
    a._proto_ === Fn.prototype
    console.log(a instanceof Fn)        // true
    a._proto._proto_ === Object.prototype
    console.log(a instanceof Object)   // true
  • 相关阅读:
    [原]java开发文档的自动生成方式 java程序员
    帮助查看本地表单元素样子的网站 Native Form Elements java程序员
    Thingjs 开门示例:以3D机柜为例 演示thingjs如何开门
    基于WebGL架构的3D可视化平台—实现汽车行走路线演示
    WebGL的3D框架比较 ThingJS 和 Three.js
    重庆新闻联播 报道 thingJS 项目 反恐3D可视化预案 多警种3D可视化预案系统
    腾讯滨海大厦 智能楼宇 智慧建筑 3D可视化管理系统优锘科技ThingJS物联网开发案例
    基于WebGL架构的3D可视化平台—新风系统演示
    基于WebGL架构的3D可视化平台—三维设备管理(ThingJS实现楼宇设备管理3D可视化)
    【教程】ThingJS 3D开发快速入门 第一讲 开发概述·优势·项目流程
  • 原文地址:https://www.cnblogs.com/Tiboo/p/11296979.html
Copyright © 2011-2022 走看看