js中原型链相关的知识和基本使用

94 阅读2分钟

首先,原型:原型就是当创建完一个构造函数之后,系统默认为当前的构造函数分配一个对象,这个对象称为 “原型”。 “原型”通过 “构造函数”的(“.”)prototype进行访问;

其次,prototype是一个对象,在prototype中也可以添加属性,每一个构造函数有属于自己的原型,只可以被当前构造函数创建的对象调用。原型不仅解决了构造函数中定义一个方法时内存浪费的问题,也解决了方法调用的安全问题。

例子:

        function Student(name, age) {

        this.name = name

        this.age = age

      }

 

       // 在原型中我们一般添加“方法”

      // 方法添加到原型对象中,解决了全局污染的问题

      Student.prototype.say = function() {

        console.log('我是say方法')

      }

       let obj = new Student('jack', 20)

       obj.say() //我是say方法

更多的相关知识将会在我完成整理后继续更新。

————————————分割线————————————————

原型链:

首先 构造函数,原型,构造器 之间的三角关系如下 构造函数创造实例对象,实例对象可以直接访问当前原型中的成员,也可以通过__proto__访问原型,其次,原型是定义构造函数时系统默认生成的一个对象,构造函数可以通过prototype访问到原型,原型可以通过 constructor访问到构造函数。如下图所示:

构造函数,原型,实例对象的三角关系.png

图1.1构造函数,原型,实例对象的三角关系

既然原型是一个对象,那么必然也存在它的构造函数(constructor),以Student构造函数为例,Student.prototype.__proto__.constructor得到原型对象的构造函数 Object

我们访问到原型 Student.prototype, 往__proto__继续往上找__proto__我们会得到 JS中的顶级成员null。

// 1.当你定义一个构造函数,那么系统会为这个构造函数默认分配一个对象,这个对象就是当前构造函数的原型,通过prototype可以进行访问

      function Student(name, age) {

        this.name = name

        this.age = age

      }

 console.log(Student.prototype.__proto__.constructor)

console.log(Student.prototype.__proto__.__proto__)//null

既然构造函数创建的是一个实例对象,那么自然可以将Student构造函数看作一个对象,那么它的构造函数又是什么呢?

我们可以通过Student.proto.constructor访问到它的构造函数,发现是JS中的另一个顶级成员:Function,所以最终形成了完整的原型链如下图所示:

222.png

图1.2原型链