JS高级<原型和原型链三角关系>

428 阅读2分钟

原型:

一:原型是什么

   1. 系统会为构造函数默认关联一个对象(只要你定义了一个构造函数,就会默认有一个对象与之关联),这个对象就称为构造函数的原型。
     (注意:所有对象都有原型,只不过这里我们关注的是构造函数的原型)

二:原型的特性

  1.通过构造函数的prototype属性访问原型对象
  2.因为原型是一个对象,所以可以像操作普通对象一样操作原型

三:原型操作

  1.在原型中添加成员
  2.访问原型中的成员
  
function Person(name, age) {
        // 添加属性
        this.name = name
        this.age = age
      }
      // 为确知函数的原型添加成员
      Person.prototype.say = function() {
        console.log(this.name)
      }

      let obj = new Person('jack', 20)
      
      let obj2 = new Person('rose', 20)
      
      // 通过构造函数创建的对象访问原型中的成员
      console.log(obj.say === obj2.say)  //返回true
      obj.say()    // jack
      obj2.say()   // rose

原型链三角关系

原型链定义:任何一个对象,都有原型对象,原型对象本身又是一个对象,所以原型对象也有自己的原型对象,这样一环扣一环就形成了一个链式结构,我们把这个链式结构称为:原型链。

一.构造函数原型链

//一个构造函数Person
function Person(name, age) {
        this.name = name
        this.age = age
      }
//给Person的原型添加了一个方法say
Person.prototype.say = function() {
        console.log(this.name)
   }
//obj是Person构造函数的实例化
 let obj = new Person('jack', 20)
 
 
 console.log(obj.__proto__.constructor === Person) // 返回true
 console.log(Person.prototype === obj.__proto__)  //返回true
 

be67c53c4696a694be856e75318d551.png

二.构造函数作为对象时的原型链

在js中,万物皆对象,如果我们把构造函数Person也当作是一个对象,则它也会有原型和构造函数

c7a99bc0c68dfcf593dd7ac42991886.png

三.完整的原型链

 1.如上面所说的,万物皆对象,原型也是一个对象,所以可以继续延伸原型链,于是我们得到以下这幅图
 

57bc6dfe5a4c9dbb890fd55ae6f3020.png

2.而当我们把构造函数Function视作一个对象的时候,奇怪的事情发生了

4a431def298d878bd79149d21e4b633.png

总结:Object.prototype是原型链的尽头,Object.prototype的原型是null