JS高级-原型、原型链

下面,请开始我的表演:
1.首先,定义两个实例
var girl = new Person(‘哈哈’,28,’SE’);
var boy = new Person(‘呵呵’,22,’Doctor’);
这两个都是Person的实例,是一个普通对象,它们有一个属性,proto,先放在这不管它指向谁
proto:Person.prototype
2 定义构造函数
function Person(name,age,job){}
这是Function的实例,是一个函数对象,它有两个属性,proto,prototype,也是先放在这,不管它们指向
proto:Function.prototype
prototype:new Person()

接下来,搞事情,下定义:
proto:指向创建这个对象的函数对象(也就是构造函数)的原型对象
prototype:只有函数对象才有,指向该函数对象的一个实例,我们把这个实例成为原型对象,它是一个普通对象
特例:Function.prototype指Function的原型对象,是一个函数对象,它没有prototype属性,是一个空函数。总之一句话,prototype指原型对象,它们都没有prototype属性。
下面这张图,很重要!很重要!很重要!

image.png

        所有对象的proto属性都指向Function.prototype,它是一个空函数,其中JSON和Math是以对象形式存在的,无需new,它们的proto属性指向Object.prototype。如下图所示
image.png

image.png

        问题来了,所有构造函数的proto属性都指向Function.prototype,那么Function.prototype的proto属性指向谁呢,在JS里面,所有的函数都是一等公民,所以,Function.prototype. proto属性指向Object.prototype,
最后Object.prototype. proto指向null。

坑一:关于修改原型对象和重写原型对象


image.png

image.png

        可以看到p.constructor已经不是指向Person了,为啥呢,因为给Person.prototype赋值的是一个对象直接量,使用对象直接量方式定义的对象的构造器指向的是根构造器Object,所以p.constructor指向的是Object,Object.prototype是由Object创建的。
        这个地方,我觉得换一种方式理解可能会更好,当对原型对象重写了之后,原型对象就不是由原来的构造函数创建的了,它是一个新的对象,那么它的构造函数就是Object。同样,此时的实例对象的构造函数也不是原来的构造函数了,指向的也是Object。
        对应的定义还是没有变,只不过是在原型对象的创建方式上变了,导致原型对象的构造器变了。来看:
        实例的原型还是那个原型对象(只不过是重写过的原型对象)
        实例的构造器还是原型对象的构造器(只不过此时构造器是Object而已)
        要对其中的值进行两两比较,就要分清楚哪个是变了的,怎么变的,其实就是原型对象的构造器变了,导致各种指向变了。
        要想避免这种变化,只要在重写原型对象的时候,手动修改构造器的指向,加上一句constructor:Person,让原型对象的构造器还是指向原来的构造器。
PS:
啥叫对象直接量:
使用对象直接量创建对象的一般格式如下:
var myobject = {属性名1:属性值1,属性2:属性值,...,属性名n:属性值n}
意思就是,声明了一种类型的变量,并同时进行了赋值,不必使用new关键字来创建对象
(创建对象实例的两种方式:
1. 使用new操作符后跟构造函数
2. 使用对象直接量表示法)

坑二:动物、狗和泰迪的故事


image.png

        此处只需要记住一句话:实例和原型对象之间存在一个连接,并不是实例和构造函数存在连接。dog是一个构造函数,animal是一个原型对象,给原型对象增加属性,实例对象可以直接引用,但构造函数是不能直接引用的。

坑三:坑1和坑2绕晕了之后再绕一绕

      function Person (name,age){               //Person是一个构造函数,person2是一个实例对象
        this.name = name;
        this.age = age;
      };
      var person2 = new Person('hahahah',22)
      Person.prototype = {
        getName:function(){
          this.name = name;
        }
      }
      var person1 = new Person('heheda',27)
      console.log('*******')
      console.log(person2.__proto__)    //指向Person原型还未更改前的状态
      console.log(person1.__proto__)
      console.log(Person.prototype)     
      console.log(person2.constructor.prototype)    //这三个指向Person的原型,已经更改后的原型
      console.log(person1.constructor.prototype)
      console.log(Object.prototype)     //后两个指向Object的原型
      console.log('*******')
      //这个地方很有意思啊,就是说,如果我在重写原型之前创建的实例,他的构造器指针是指向构造函数原型的,原型怎么变他就怎么变,
      //但是在重写原型之后创建的实例,他的构造器指针指向就是跟构造函数的原型

        不厚道的笑了,这段代码表达了坑一想表达的意思,就是直接对象赋值后的构造器指向根构造器,同时还表示了一个意思,就是在原型被重写后,原型被重写之后创建的实例指向的是新的原型,原型被重写之前创建的实例指向的还是以前的原型。(注意,此处的原型是重写!!!)

     function Person (name,age){
        this.name = name;
        this.age = age;
      };
      var person2 = new Person('hahahah',22)
      Person.prototype.getName = function(){}
      var person1 = new Person('heheda',27)
      console.log('*******')
      console.log(person2.__proto__)    
      console.log(person1.__proto__)
      console.log(Person.prototype)     
      console.log(person1.constructor.prototype)
      console.log(person2.constructor.prototype)
//前面几个都是指向Person的原型,已经更改后的原型
      console.log(Object.prototype)     //指向Object的原型
      console.log('*******')

        有木有看出来和上面代码的区别,这个地方是原型的更改,不是重写!所以说,在原型更改之前创建的实例和在原型更改之后创建的实例都指向新的原型,构造器也是指向新的原型。

        信息量太大,需要梳理总结一下:
1. 关于原型修改,不管是在修改前创建的实例还是在修改后创建的实例,他们的proto属性,以及他们的构造器指向的原型,都是指向修改后的原型。
2. 关于原型重写(原型重写使用对象直接量方式进行赋值),这里有三个方向的指向,请站稳扶好。(person1表示原型重写前创建的实例,person2表示原型重写后创建的实例)
① 重写前创建的实例他的proto属性(person1.proto)指向的是被重写前的原型;
② 重写后创建的实例他的proto属性(person2.proto),以及重写前创建的实例的构造器指向的原型(person1.constructor.prototype)指向的是被重写后的原型,也就是Person.prototype。
③ 重写后创建的实例的构造器指向的原型(person2.constructor.prototype)指向的是根构造器的原型,也就是Object.prototype

      function father (){}
      var son1 = new father()
      //三种方式

      function father (name){
        this.name = name
        function getName(){}
      }
      father.prototype = new father()

      // father.prototype.getName = function(){}

      // father.prototype = {
      //   getName:function(){}
      // }

      var son2 = new father()
上面的笔记是我第一次看原型原型链写出来的,后面我有看了一次,有了点新感受

通过原型来添加方法,解决数据共享,节省内存空间

实例对象中有个属性,proto,是个对象,指向原型对象,不是标准的属性,浏览器使用,有些浏览器可能会不支持(IE8就不支持)。
构造函数中有个属性,prototype,是个对象,指向原型对象,是标准的属性,程序猿使用

构造函数、原型对象、实例对象之间的关系

构造函数中有一个属性叫prototype,是构造函数的原型对象;
构造函数可以实例化对象;

原型对象中有一个constructor构造器,指向自己所在的构造函数;
(也就是说,构造器.prototype ->原型对象;原型对象.constructor->构造器)
原型对象中的方法是可以被实例对象直接访问的;

实例对象中有一个属性叫proto,指向该构造函数的原型对象。

什么样的数据需要写在原型中?

需要共享的数据就写在原型中

不需要共享的数据就写在构造函数中

原型中的方法可以相互调用,只要在一个方法的定义里面直接使用this.f2();即可,就像是在方法中调用参数一样

原型链

实例对象使用的属性或方法,现在实例对象中查找,如果找不到就会去实例对象的proto指向的原型对象中查找,找到了就是用,找不到就报错。
        实例对象是由构造函数创建的,原型对象是构造函数的prototype的一个属性,实例对象的proto属性指向原型对象,这样看起来实例对象和原型对象有间接的关系,这个关系是通过原型(proto)来联系的,这个关系就叫做原型链,它表示了原型对象和实例对象的关系。
        原型指向可以改变,如上所述,实例对象的原型proto指向的是该对象所在的构造器的原型对象,构造函数的原型对象(prototype)指向如果改变了,实例对象的原型(proto)指向也会发生改变。
        实例对象访问这个属性,应该先从实例对象中找,找到了就直接用,找不到就去指向的原型对象中找,通过实例对象是不能改变原型对象中的属性值的。
        JS是一门动态类型的语言,对象没有的属性,只要通过“对象.属性名”的方式,对象就有了这个属性了,但这个属性没有赋值,所以就会输出undefined,但是“对象.方法名”就会报错。

函数也是对象

函数是对象,对象不一定是函数
对象中有proto,函数中有prototype,如果一个东西里面有prototype又有proto属性,那它就是函数

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容