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
  • 相关阅读:
    evernote100个做笔记的好方法
    平衡二叉树的调整模版
    晨间日记的奇迹
    hdu 2952 Counting Sheep
    hdu 1535 Invitation Cards
    poj 3259 Wormholes(spfa)
    poj 2263 Heavy Cargo(floyd)
    poj 3268 Silver Cow Party(SPFA)
    hdu 1690 Bus System
    hdu 3631 Shortest Path(Floyd)
  • 原文地址:https://www.cnblogs.com/Tiboo/p/11296979.html
Copyright © 2011-2022 走看看