关于原型链的心得体会
发布日期:2021-06-30 19:56:36 浏览次数:2 分类:技术文章

本文共 3017 字,大约阅读时间需要 10 分钟。

附上别人总结的例子,方便查阅:

个人笔记:记住下面的图。

实例对象的隐式指向(__proto__)的原型等于构造器的显式指向的(prototype)原型。

比如:

function Foo(){}

var f1 = new Foo();

console.log(f1.__proto__ === Foo.prototype); // true

由图中可以得出一下结论

Object.__proto__.__proto__ === Object.prototype    // true

Object.__proto__ === Function.prototype  // true

之后所有的讲解围绕这幅图展开。(图中__proto__代表隐式指向,prototype代表显式指向)

                                          原型链示意图1

Object.__proto__即为Function.prototype,控制台显示为

       为什么呢?Object也是一个函数,比如函数function Foo(){}可以看成var Foo = new Function();

       那么function Object(){...}也可以看成var Object = new Function();所以Object可以看成是Function的实例对象,实例对象的隐式指向(__proto__)的原型等于构造器的显式指向的(prototype)原型,那么Object.__proto__就是等于Function.prototype。所以js说万物皆对象不是没有道理的。

       总结:一般看到控制台这样的[native code],马上想到Function的显式指向的原型对象,再结合原型链示意图1思考。

Object.__proto__.__proto__即为Object.prototype,控制台显示如下:

       为什么Object.__proto__.__proto__即为Object.prototype呢?由上一个问题已经得出Object.__proto__即为Function.prototype(Function显式指向的原型对象,是一个对象),由实例对象的隐式指向(__proto__)的原型等于构造器的显式指向的(prototype)原型,得出Function.prototype.__proto__(实例对象的隐式指向的原型)等于Object.prototype(构造器的显式指向的原型),所以Object.__proto__.__proto__等于Object.prototype。

 

A instanceof B

只要A的隐式原型链(__proto__)能够追溯到B的显式指向的原型对象(prototype),就返回true,否则为false。

function fn(){}var obj = {}console.log(fn instanceof Function)//true/*    把function fn(){}看成var fn = new Function();    那么fn.__proto__就是Function.prototype,fn的隐式原型链能到达Function的显式指向的原型对象,为true*/console.log(obj instanceof Object)//true/*    obj就是一个空的Object对象,记住,是对象,和new Object一样,对象的隐式原型obj.__proto__就是Object的显式原型,    已经到达,为true,该情况比较特殊,得记住。*/console.log(fn instanceof Object)//true/*    把function fn(){}看成var fn = new Function();之后可以得出,fn.__proto__是Function的原型(即Function.prototype),再接着fn.__proto__.proto__就是Object的原型(Object.prototype),已到达,为true,具体可见原型链示意图1*/console.log(obj instanceof Function)//false/*    obj是个空对象,obj.__proto__就是Object的原型对象(Object.prototype),obj.__proto__.proto__就是null,终止,没有到达Function.prototype,所以false*/

如果尝试访问对象的显式指向(prorotype)的原型对象呢?有吗?对象没定义这个属性之前都是undefined,而__proto__是隐式已经定义好的。 

 

接下来来看看一些例子:

/*  测试题1*/function A() {}A.prototype.n = 1;var b = new A();A.prototype = {   n: 2,   m: 3};var c = new A();console.log(b.n, b.m, c.n, c.m);

控制台执行结果是:

       1 undefined 2 3

解释:

       声明函数时创建的function对象A(),同时创建原型对象用A.prototype显式指向它,这个原型对象再隐式指向Object的显式原型对象(Object.prototype),具体见原型链示意图1。

       接着这个A()的显式指向的原型对象里面添加一个属性n为1。

       声明b指向实例对象A,这个对象b的__proto__就是A.prototype(A的显式指向的原型对象),见原型链示意图1

       现在要开始改变了,A()的显式指向的原型对象变了!!!意味着这个工厂以后创建对象的原型对象都变了,但是原来的原型对象还有东西去指着它的,那就是刚刚的b,b对象的隐式指向的原型对象被A()抛弃了,里面还有刚刚添加的n为1呢。

       新工厂造新对象c,隐式指向的原型对象就是新的{n:2, m:3}

       所以最后控制台打印的是1 undefined 2 3

 如果被function A() 抛弃的原型对象没有被b隐式指向呢??

function A() {}A.prototype.n = 1;A.prototype = {   n: 2,   m: 3};var b = new A();var c = new A();console.log(b.n, b.m, c.n, c.m);

那么答案就是2 3 2 3

 

 

来看看测试题2

/*   测试题2   */  function F (){}  Object.prototype.a = function(){    console.log('a()')  }  Function.prototype.b = function(){    console.log('b()')  }  // 下面操作均可以看原型链示意图1得出解释  var f = new F()  f.a() // 打印a()  // f.b() // 会报错,b not a function  F.a() // 打印a()  F.b() // 打印b()

==============Talk is cheap, show me the code================

转载地址:https://liuchenyang0515.blog.csdn.net/article/details/90581120 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:深入理解多线程
下一篇:android学习笔记----WebView的url跳转时方法执行顺序体会

发表评论

最新留言

不错!
[***.144.177.141]2024年04月25日 15时51分57秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章