原型和原型链

113 阅读3分钟

一. 原型和原型链

1.JavaScript是一门基于原型的语言,在软件设计模式中,有一种模式叫做原型模式,JavaScript正是利用这种模式而被创建出来

2.原型模式是用于创建重复的对象,同时又能保证性能,这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。这种模式是实现了一个原型接口,该接口用于创建当前对象的克隆。原型模式的目的是用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象,也就是说利用已有的一个原型对象,可以快速地生成和原型对象一样的新对象实例

二. 原型

原型概念:原型:一个可以被复制(或者叫克隆)的一个类,通过复制原型可以创建一个一模一样的新对象,也可以说原型就是一个模板,在设计语言中更准确的说是一个对象模板

1)原型是定义了一些公用的属性和方法,利用原型创建出来的新对象实例会共享原型的所有属性和方法

      // 创建原型
    var Person = function(name){
    this.name = name;
   };

   // 原型的方法
   Person.prototype.sayHello = function(){
   console.log(this.name+",hello");
  };

  // 实例化创建新的原型对象,新的原型对象会共享原型的属性和方法
  var person1 = new Person("zhangsan");
  var person2 = new Person("lisi");

  // zhangsan,hello
  person1.sayHello();
  // lisi,hello
  person2.sayHello();
  

2)严格模式下,原型的属性和方法还是会被原型实例所共享的

 // 开启严格模式,原型的属性和方法还是会被原型实例所共享的
   "use strict";

// 创建原型
var Person = function(name){
    this.name = name;
};

// 原型的方法
   Person.prototype.sayHello = function(){
   console.log(this.name+",hello");
  };

 // 实例化创建新的原型对象,新的原型对象会共享原型的属性和方法
 var person1 = new Person("zhangsan");
 var person2 = new Person("lisi");

 // zhangsan,hello
 person1.sayHello();
 // lisi,hello
 person2.sayHello();

3)原型的总结:

  • 所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象
  • 所有函数都有一个prototype(原型)属性,属性值是一个普通的对象
  • 所有引用类型的__proto__属性指向它构造函数的prototype

4)函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址

5)函数的原型对象__proto__:所有对象都有__proto__属性, 当用构造函数实例化(new)一个对象时,会将新对象的__proto__属性指向 构造函数的prototype

6)所有函数的__proto__都是指向Function的prototype 构造函数new出来的对象__proto__指向构造函数的prototype 非构造函数实例化出的对象或者对象的prototype的__proto__指向Object的prototype Object的prototype指向null

7)实例的构造函数属性(constructor)指向构造函数 :person1.constructor == Person

三. 原型链

当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的_proto_隐式原型上查找,即它的构造函数的prototype的_proto_中查找,这样一层一层向上查找就会形成一个链式结构,我们称之为原型链。

例如:有以下代码:

   function Parent(month){
   this.month = month;
}

   var child = new Parent('Ann'); 

   console.log(child.month); // Ann

   console.log(child.father); // undefined
   

在child查找某个属性时,会执行下面步骤:

QQ图片20211026102722.jpg

访问链路为:

QQ图片20211026102742.jpg

  • 一直往上层查找,直到到null还没有找到,则返回undefined
  • Object.prototype.proto === null
  • 所有从原型或更高级原型中的得到、执行的方法,其中的this在执行时,指向当前这个触发事件执行的对象