function New(f){
return function(){
var o = {'__proto__': f.prototype};
f.apply(o, arguments);
return o;
}
}
function Person(name, age){
this.name = name;
this.age = age;
}
var p = New(Person)('xl', 24);

在一段javascript基础学习视频中,老师大胆想象了一下new方法创造实例对象的原理。

其中一个关键点,让对象的__proto__属性指向任何一个构造函数:{'__proto__': f.prototype}

这个我就蛮好奇的,直接这样,然后以下两段都成立了。

p instanceof Person   // true
p.constructor === Person // true

以上说明,这个隐藏的属性__proto__的指向一旦建立,那么p实例的constructor就自动指向了Person构造器(此理解是错的)。

2018-05-03:今天继续了解原型链时,发现我这里理解错了。其实p实例没有生成指向Person构造器的constructor属性,因为测试发现p.hasOwnProperty('constructor')结果是false。发现p.constructor有值,并指向Person,是因为p在自己上面找不到constructor时,沿着原型找到了Person原型的constructor属性,所以下图才是对的。

但是我还是好奇为什么。

之前我一直以为instanceof 是否成立还和constructor有关系。

而实际上是,{'__proto__': f.prototype}这个直接的导致了constructor关系(上图绿线)的建立。当我试图把constructor的两个关系重新指向时,

p.constructor = {other: 1};
Person.prototype.constructor = {other: 2}; p instanceof Person // true

p仍然是Person的实例,所以instanceof和constructor无关。而当我试图改变Person的prototype的指向之后,终于变了

Person.prototype = {other: 3}

p instanceof Person   // false

另外我尝试了一下,在改变Person.prototype指向之前,让其他任何函数的prototype都指向Person.prototype,则

function Person2(){}
Person2.prototype = Person.prototype p instanceof Person // true
p instanceof Person2 // true

p可以是多个构造函数的实例。

试验之后的结论是:

instanceof 与constructor属性无必然关系,只要对象的隐藏属性__proto__指向任何构造器的prototype属性,那么对象都会是该构造器的实例;对象也可以是多个构造器的实例。

修改:

结论改为

instanceof 与constructor属性无必然关系,只要对象的隐藏属性__proto__,或者对象的__proto__的__proto__,或者对象的__proto__的__proto__的__proto__..........指向任何构造器的prototype属性,那么对象都会是该构造器的实例;对象也可以是多个构造器的实例。

夯实JavaScript基础之prototype, __proto__, instanceof的更多相关文章

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

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

  2. JavaScript:Function/Object/prototype/__proto__

    console.log(Object.__proto__===Function.prototype); //true console.log(Object.prototype.__proto__); ...

  3. js prototype __proto__ instanceof constructor

    JS中有两个特殊的对象:Object与Function,它们都是构造函数,用于生成对象. Object.prototype是所有对象的祖先,Function.prototype是所有函数的原型,包括构 ...

  4. 你真的懂JavaScript基础类型吗

    夯实Javascript基础. 基本类型有六种: null,undefined,boolean,number,string,symbol. 基本类型的值是保存在栈内存中的简单数据段 基础类型特性 基础 ...

  5. JavaScript中的prototype和__proto__细致解析

    最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...

  6. 15条规则解析JavaScript对象布局(__proto__、prototype、constructor)

    大家都说JavaScript的属性多,记不过来,各种结构复杂不易了解.确实JS是一门入门快提高难的语言,但是也有其他办法可以辅助记忆.下面就来讨论一下JS的一大难点-对象布局,究竟设计JS这门语言的人 ...

  7. javascript--15条规则解析JavaScript对象布局(__proto__、prototype、constructor)

    大家都说JavaScript的属性多,记不过来,各种结构复杂不易了解.确实JS是一门入门快提高难的语言,但是也有其他办法可以辅助记忆.下面就来讨论一下JS的一大难点-对象布局,究竟设计JS这门语言的人 ...

  8. 对于JavaScript对象的prototype和__proto__的理解

    一.Object和Function的关系: 刚学JavaScript的时候,看书上说JavaScript中万物皆对象,而javascript中的其他对象都是从Object继承而来,包括内置对象.瞬间觉 ...

  9. javascript prototype __proto__区别

    An Object's __proto__ property references the same object as its internal [[Prototype]] (often refer ...

随机推荐

  1. 学习vim 从常用按键开始

      ctrl+e 将屏幕下滚一行 ctrl+u 将屏幕上滚半页 ctrl+d 将屏幕下滚半页 ctrl+b 将屏幕上滚一页 ctrl+f 将屏幕下滚一页 撤销 u 前进 ctrl r 移动 下一个单词 ...

  2. List、Map、Set三个接口存取元素时,各有什么特点

    List接口以特定索引来存取元素,可以有重复元素 Set接口不可以存放重复元素(使用equals方法区分是否重复) Map接口保存的是键值对(key-value-pair)映射,映射关系可以是一对一或 ...

  3. RLO文件名欺骗

    windows下面,支持一种特殊的unicode字符RLO,一个字符串中如果有这个字符的话,那么在windows下显示时,就会把RLO右侧的字符串逆序显示出来,原始字符串:abcd[RLO]efgh, ...

  4. 如何通过cmd命令远程重启或远程关闭Windows服务器

    一.想要远程控制服务器,前提条件是远程服务器需要开启IPC$ ,且本地能访问远程服务器445端口 1.开启ipc$ net share IPC$ 2.如果只指定管理员才有执行ipc$的权限 net s ...

  5. Map集合类(一.hashMap源码解析jdk1.8)

    java集合笔记一 java集合笔记二 java集合笔记三 jdk 8 之前,其内部是由数组+链表来实现的,而 jdk 8 对于链表长度超过 8 的链表将转储为红黑树 1.属性 //节点数组,第一次使 ...

  6. foreach循环的跳出

    由于foreach循环中不像for循环可以直接通过return或break来终止当前循环,不过这里可以借助try...catch...来完成var arr = [1,2,3,4,5,6,7,8,9,1 ...

  7. 实战:基于 Spring 的应用配置如何迁移至阿里云应用配置管理 ACM

    最近遇到一些开发者朋友,准备将原有的Java Spring的应用配置迁移到 阿里云应用配置管理 ACM 中.迁移过程中,遇到不少有趣的问题.本文将通过一个简单的样例来还原迁移过程中遇到的问题和相关解决 ...

  8. CentOS下MYSQL数据库的安装

    关于在Centos系统下安装MYSQL数据库,网络上资料有很多,在此主要感谢该文章的博主:http://www.cnblogs.com/zhoulf/archive/2013/01/25/zhoulf ...

  9. 【LeetCode 5】 最长回文子串

    题目链接 描述 [题解] 一个讲得比较好的博客地址; 感觉manacher算法的大概思路就是利用回文串左右对称的性质. 利用之前算出来的以某个点为中心的回文串.而当前要枚举的串被包括在其中. 则可以用 ...

  10. shiro与spring的整合

    shiro与spring的整合 上一期,我们分享了如何在项目中使用shiro,了解了shiro的基本用法,但毕竟学习shiro的目的就是在项目中应用shiro,更准确地说是在web项目中应用shiro ...