js原型和原型链图解区别（浅谈JS原型）

前言

JavaScript 原型是该语言中一个非常重要的概念 
    
    
    
 。理解原型是理解 JavaScript 的关键
     


     


     


     。在本篇技术博客中 
    
    
    
 ，我们将深入探讨 JavaScript 的原型概念
     


     


     


     ，并介绍常用的操作对象原型的方法 




 




 




 




。(欢迎点评,欢迎指正!)

什么是原型？

在 JavaScript 中 




 




 




 




，每个对象都有一个原型（prototype）对象 

   

   

   

。原型可以看做是对象的“父类    
    
    
    
” 

   

   

   

，包含了一些共有的属性和方法
     

     

     

     。当我们试图访问对象的属性时
     

     

     

     ，JavaScript 首先查找该对象本身是否有该属性  




  




  




  



，如果没有 


  


  


  


，就会在该对象的原型中查找
     
     
     
    ，如果还没有   




   




   




   


，就会一直沿着原型链(也可理解为原型对象的原型对象)向上查找 



 



 



 



，直到找到该属性或者查找到原型链的顶端为止  




  




  




  



。

在 JavaScript 中                  ，我们可以使用 Object.getPrototypeOf 方法来获取一个对象的原型
    




    




    




    

，例如：

const obj = {}; console.log(Object.getPrototypeOf(obj)); // 输出：{}

这里的 {} 就是 obj 对象的原型 


  


  


  


。

原型链

每个对象的原型也可以有自己的原型



















，这样就形成了一个链式结构                  ，我们称之为“原型链  


     


     


     


 ”
     
     
     
    。

在 JavaScript 中
     



     



     



     
，原型链的顶端是 Object.prototype



















，它是所有对象的默认原型   




   




   




   


。Object.prototype 对象中包含了一些常用的属性和方法 
    
    
    
 ，例如 toString    
    
    
    
、valueOf 等 



 



 



 



。

const obj = {}; console.log(Object.getPrototypeOf(obj) === Object.prototype); // 输出：true console.log(obj.toString()); // 输出：[object Object]

在 JavaScript 中
     


     


     


     ，我们可以通过 Object.create 方法来创建一个新对象 




 




 




 




，并将其原型指向指定对象                  。例如：

const obj1 = { name: Jack }; const obj2 = Object.create(obj1); console.log(obj2.name); // 输出：Jack

在上面的代码中 

   

   

   

，我们创建了一个对象 obj1
     

     

     

     ，然后通过 Object.create 方法创建了一个新对象 obj2  




  




  




  



，并将其原型指向 obj1
    




    




    




    

。由于 obj1 中包含了一个属性 name 


  


  


  


，所以在 obj2 中也能访问到该属性



















。

构造函数创建对象

在JavaScript中
     
     
     
    ，通过构造函数创建对象时   




   




   




   


，这些对象都会有一个内部属性Prototype 



 



 



 



，指向构造函数的原型对象                  。例如：

function Person(name, age) { this.name = name; this.age = age; } const person = new Person(Tom, 20); console.log(person.__proto__ === Person.prototype); // true

这里的person.__proto__就是指向Person构造函数的原型对象Person.prototype
     



     



     



     
。通过new关键字创建的实例对象就是构造函数的一个实例                  ，因此它继承了构造函数的原型对象中定义的属性和方法



















。

如果我们想要给Person构造函数的原型对象添加一个方法
    




    




    




    

，可以通过给Person.prototype赋值来实现：

Person.prototype.sayHello = function() { console.log(`Hello, my name is ${this.name}`); }

现在



















，Person构造函数的所有实例对象都可以访问这个新定义的方法：

const person = new Person(Tom, 20); person.sayHello(); // Hello, my name is Tom

当我们访问一个对象的属性或方法时                  ，JavaScript引擎会首先查找对象本身是否有该属性或方法 
    
    
    
 。如果对象本身没有定义
     



     



     



     
，就会沿着它的原型链向上查找



















，直到找到为止
     


     


     


     。如果一直查找到最顶层的原型对象还没有找到 
    
    
    
 ，则返回undefined 




 




 




 




。

__proto__ 与 Prototype 区别

在JavaScript中
     


     


     


     ，每个对象都有一个__proto__ 属性和一个构造函数的 prototype 属性 

   

   

   

。它们两者都与对象原型有关 




 




 




 




，但是它们的作用和用法是不同的
     

     

     

     。

__proto__ 是一个对象的内部属性 

   

   

   

，用于指向该对象的原型  




  




  




  



。当我们访问对象的某个属性时
     

     

     

     ，JavaScript引擎会先查找该对象本身是否有该属性  




  




  




  



，如果没有则会去该对象的原型链中查找 


  


  


  


。因此 


  


  


  


，我们可以通过修改 __proto__ 来修改对象的原型链
     
     
     
    ，但是不建议这样做   




   




   




   


，因为 __proto__ 是一个非标准的属性 



 



 



 



，在一些浏览器中可能会出现兼容性问题
     
     
     
    。

相比之下                  ，prototype 是一个构造函数特有的属性
    




    




    




    

，它是一个对象



















，包含了该构造函数的所有实例共享的属性和方法   




   




   




   


。当我们使用 new 运算符创建一个实例时                  ，实例对象会继承其构造函数的 prototype 属性 



 



 



 



。因此
     



     



     



     
，我们可以通过在构造函数的 prototype 上定义属性和方法来实现所有实例共享这些属性和方法的效果                  。

下面是一个简单的例子



















，演示了 __proto__ 和 prototype 的使用方法和区别：

function Animal(name) { this.name = name; } // 通过 prototype 定义方法 Animal.prototype.sayName = function() { console.log(My name is, this.name); }; // 创建实例 const cat = new Animal(Tom); // 访问实例属性和方法 console.log(cat.name); // Tom cat.sayName(); // My name is Tom // 修改实例的 __proto__ const dog = {}; dog.__proto__ = Animal.prototype; dog.name = Spike; dog.sayName(); // My name is Spike

上述例子中 
    
    
    
 ，我们首先定义了一个 Animal 构造函数
     


     


     


     ，并通过 prototype 定义了一个 sayName 方法
    




    




    




    

。然后 




 




 




 




，我们创建了一个 cat 实例 

   

   

   

，访问了实例的 name 属性和 sayName 方法



















。接着
     

     

     

     ，我们创建了一个 dog 对象  




  




  




  



，并将其 __proto__ 属性设置为 Animal.prototype 


  


  


  


，这样 dog 对象就可以继承 Animal 的 prototype 上定义的方法和属性                  。最后
     
     
     
    ，我们访问了 dog 对象的 name 属性和 sayName 方法   




   




   




   


，验证了 __proto__ 和 prototype 的区别
     



     



     



     
。

操作对象原型的方法

在 JavaScript 中 



 



 



 



，我们可以使用一些方法来操作对象原型,下面是一些常用的操作对象原型的方法：

Object.getPrototypeOf(obj)：获取对象的原型



















。 Object.setPrototypeOf(obj, prototype)：设置对象的原型 
    
    
    
 。 obj.hasOwnProperty(prop)：判断对象是否有自有属性prop
     


     


     


     。 obj.isPrototypeOf(obj2)：判断对象是否是另一个对象的原型 




 




 




 




。

需要注意的是                  ，修改原型对象会对继承自它的所有实例对象生效 

   

   

   

。因此
    




    




    




    

，在修改原型对象时需要特别小心



















，确保不会对其他对象产生影响
     

     

     

     。

Object.create()

Object.create()：创建一个新对象                  ，使用现有对象作为新对象的原型  




  




  




  



。

const parent = { name: "parent", sayHello: function () { console.log(`Hello, Im ${this.name}.`); }, }; const child = Object.create(parent); child.name = "child"; child.sayHello(); // Hello, Im child.

Object.getPrototypeOf()

Object.getPrototypeOf()：获取对象的原型 


  


  


  


。

const parent = { name: "parent", }; const child = Object.create(parent); console.log(Object.getPrototypeOf(child) === parent); // true

Object.setPrototypeOf()

Object.setPrototypeOf()：设置对象的原型
     
     
     
    。

const parent = { name: "parent", }; const child = {}; Object.setPrototypeOf(child, parent); console.log(Object.getPrototypeOf(child) === parent); // true

Object.prototype.hasOwnProperty()

Object.prototype.hasOwnProperty()：判断对象是否拥有某个属性
     



     



     



     
，不包括原型链上的属性   




   




   




   


。

const obj = { a: 1 }; console.log(obj.hasOwnProperty("a")); // true console.log(obj.hasOwnProperty("toString")); // false

Object.prototype.isPrototypeOf()

Object.prototype.isPrototypeOf()：判断对象是否是另一个对象的原型 



 



 



 



。

const parent = {}; const child = Object.create(parent); console.log(parent.isPrototypeOf(child)); // true console.log(child.isPrototypeOf(parent)); // false

Object.prototype.constructor

Object.prototype.constructor：获取对象的构造函数                  。

function Person(name) { this.name = name; } const person = new Person("Tom"); console.log(person.constructor === Person); // true

使用场景

JS的原型在实际开发中有许多使用场景



















，其中一些常见的包括：

原型继承：使用原型链实现继承 
    
    
    
 ，可以减少代码的冗余
     


     


     


     ，提高代码的可重用性
    




    




    




    

。 动态添加方法：在原型对象上动态添加方法 




 




 




 




，可以使得所有实例都能共享该方法 

   

   

   

，避免每个实例都单独创建方法
     

     

     

     ，节省内存



















。 实现多态：利用原型链的特性  




  




  




  



，可以实现多态 


  


  


  


，即同一个方法可以有多种不同的实现方式
     
     
     
    ，根据实际对象类型进行调用                  。 扩展和覆盖原型属性和方法：可以通过修改原型对象来实现对所有实例属性和方法的扩展或覆盖   




   




   




   


，具有很大的灵活性
     



     



     



     
。

举例说明几个使用场景

创建对象

在JavaScript中 



 



 



 



，可以使用原型来创建对象                  ，这种方式可以避免多次创建相同的对象
    




    




    




    

，提高代码的性能



















。例如：

function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log(`Hello, my name is ${this.name}`); } const person1 = new Person(John); person1.sayHello(); // 输出：Hello, my name is John const person2 = new Person(Jane); person2.sayHello(); // 输出：Hello, my name is Jane 继承

JavaScript中没有类的概念



















，继承是通过原型来实现的 
    
    
    
 。子类通过原型链继承父类的属性和方法
     


     


     


     。例如：

function Animal(name) { this.name = name; } Animal.prototype.sayName = function() { console.log(`My name is ${this.name}`); } function Dog(name, breed) { Animal.call(this, name); // 继承父类的属性 this.breed = breed; } Dog.prototype = Object.create(Animal.prototype); // 继承父类的方法 Dog.prototype.constructor = Dog; Dog.prototype.sayBreed = function() { console.log(`My breed is ${this.breed}`); } const dog = new Dog(Buddy, Golden Retriever); dog.sayName(); // 输出：My name is Buddy dog.sayBreed(); // 输出：My breed is Golden Retriever 修改对象

通过原型                  ，可以方便地对现有对象进行修改或添加新的属性和方法 




 




 




 




。例如：

const person = { name: John }; Object.getPrototypeOf(person).sayHello = function() { console.log(`Hello, my name is ${this.name}`); } person.sayHello(); // 输出：Hello, my name is John 多态

在 JavaScript 中
     



     



     



     
，可以使用原型实现多态 

   

   

   

。多态是指在不同的对象实例中



















，同一个方法可以有不同的实现方式
     

     

     

     。通过原型 
    
    
    
 ，可以在不改变对象实例自身的情况下
     


     


     


     ，实现方法的多态性  




  




  




  



。

举个例子 




 




 




 




，假设有一个名为 Animal 的构造函数 

   

   

   

，其原型对象有一个方法 speak
     

     

     

     ，并且有两个子构造函数 Cat 和 Dog  




  




  




  



，它们继承了 Animal 的原型对象 


  


  


  


。现在我们希望在 Cat 和 Dog 的实例中 


  


  


  


，分别实现 speak 方法的不同实现方式
     
     
     
    。

function Animal() {} Animal.prototype.speak = function() { console.log(Animal speaks); } function Cat() {} Cat.prototype = Object.create(Animal.prototype); Cat.prototype.constructor = Cat; Cat.prototype.speak = function() { console.log(Meow); } function Dog() {} Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.speak = function() { console.log(Woof); } const cat = new Cat(); const dog = new Dog(); cat.speak(); // Meow dog.speak(); // Woof

在上述例子中
     
     
     
    ，我们通过将 Cat 和 Dog 的原型对象设置为 Animal 的原型对象   




   




   




   


，并分别实现了它们自己的 speak 方法 



 



 



 



，使得它们的 speak 方法在不同的实例中有不同的实现方式   




   




   




   


。这就是使用 JS 原型实现多态的一种方法 



 



 



 



。

说明：在JavaScript中                  ，每个函数都有一个默认的 prototype 属性
    




    




    




    

，它指向一个对象



















，即该函数的原型对象                  。该原型对象是包含构造函数所有实例共享的属性和方法
    




    




    




    

。

而 constructor 是原型对象上的一个属性                  ，它指向创建当前对象的构造函数



















。因此 Cat.prototype.constructor = Cat 的作用是将 Cat 函数的原型对象上的 constructor 属性指向 Cat 函数本身
     



     



     



     
，以确保 Cat 函数作为构造函数创建的对象



















，其 constructor 属性正确地指向 Cat 函数本身                  。

在上述代码中 
    
    
    
 ，由于将 Animal 函数的原型对象替换为 Cat 函数的实例
     


     


     


     ，因此也需要将 constructor 属性指向 Cat 函数本身 




 




 




 




，以确保 constructor 属性的正确性
     



     



     



     
。

总结

JavaScript 中的所有对象都有一个内置的属性 __proto__ 

   

   

   

，用于指向其原型对象



















。每个构造函数都有一个名为 Prototype 的属性
     

     

     

     ，该属性指向一个对象  




  




  




  



，该对象是由该构造函数创建的所有实例对象的原型 
    
    
    
 。因此 


  


  


  


，可以通过构造函数的 Prototype 属性来扩展对象的原型
     


     


     


     。对象可以访问其原型中的属性和方法
     
     
     
    ，就像它们是对象自身的属性和方法一样 




 




 




 




。当对象尝试访问其自身不存在的属性或方法时   




   




   




   


，它会沿着原型链向上查找 



 



 



 



，直到找到匹配的属性或方法为止 

   

   

   

。

在 JavaScript 中                  ，原型可以用于实现继承和共享属性和方法
     

     

     

     。通过创建一个新对象
    




    




    




    

，并将其原型设置为另一个对象



















，可以实现原型继承  




  




  




  



。此外                  ，可以使用原型将属性和方法添加到对象中
     



     



     



     
，这些属性和方法可以被该对象的所有实例共享 


  


  


  


。

总之



















，原型是JavaScript中一个非常重要的概念 
    
    
    
 ，掌握原型的原理和使用方法对于编写高效  


     


     


     


 、优雅的JavaScript代码至关重要
     
     
     
    。