尽可能跟你讲懂原型

440 阅读4分钟

在讲原型之前我们要先了解构造函数

构造函数 (Constructor)  : 构造函数是用来创建对象的函数。当使用 new 关键字来调用一个函数时,它会创建一个新的对象

function Car(color,owner) { 
    this.color = color 
    this.owner = owner 
}


let tian = new Car('black','tiantian')

那到底什么是原型呢?通俗来说原型就是直接调用构造函数的制造对象的公共祖先,接下来我就来说说原型的作用和用法

原型的作用

每当我们通过构造函数来创建对象时都要给予对象属性和值,以上文的代码为例,每当我们创造一个对象实例的时候我们都要给与其颜色和车主的属性值,倘若我们创造大量的对象它们的一些属性相同(可以理解成同一汽车生产线生产的汽车颜色可能有很多种,但同一型号的车的型号,车长车宽等属性一定相同),这时候我们一直使用cv大法岂不是过于繁琐了。别急,原型(prototype)就可以解决这个问题

Car.prototype.name = 'su7' 
Car.prototype.lang = 5000 
Car.prototype.height = 1400
function Car(color,owner) { 
      this.color = color 
      this.owner = owner 
    } 
let tian = new Car('black','tiantian') 
let xuan = new Car('red','xuanxuan') 
console.log(tian.name);

在构造函数中并没有name,但调用name时依旧会打印su7,name具有隐式。可以通过原型直接访问,提高了代码的执行效率。

PS D:\wlj_fullstuck_ai-master\wlj_fullstuck_ai-master\wlj_fullstuck_ai-master\JS\原型> node 
2.js su7

原型的一些注意事项

1.实例对象可以修改显示继承到的属性,但无法修改隐式继承到的属性(原型上的)

Car.prototype.product = 'xiaomi' 
function Car() {
     this.name = 'su7'
     }
     let car = new Car() 
     car.name = '保时捷' 
     car.product = 'huawei' 
     console.log(car);

这里打印出huawei,在原型product上,它并不是修改xiaomi 这个属性,而是增加了huawei,即 实例对象可以修改显示继承到的属性,但是无法修改隐式继承到的属性(原型上的)。

  1. 实例对象无法给原型新增属性
  2. 实例对象无法删除原型上的属性
Car.prototype.nickname = 'xiaohong' 
delete Car.prototype.product

实例对象无法给原型新增删除属性。想要修改只能通过类来修改

对象原型

每个对象都有一个特殊的内部属性 __proto__,它指向该对象的原型。原型可以是另一个对象或者 null

let person1 = new Person('Alice'); 
console.log(person1.__proto__ ); // Person.prototype

对象的隐式原型等于构造函数的显式原型

函数原型与对象原型的关系

函数原型和对象原型之间有一个重要的关系:通过函数原型,我们可以在创建的对象之间共享方法和属性。

当你创建一个新的对象时,JavaScript 引擎会自动将对象的 __proto__ 属性设置为该构造函数的 prototype 属性的值。

let person2 = new Person('Bob'); 
console.log(person2.__proto__ === Person.prototype); // true

constructor 构造器

在原型链中,constructor 属性指的是指向创建对象的构造函数的引用。每个对象都有一个 constructor 属性,它引用了创建该对象的构造函数。

function Person(name) {
    this.name = name;
    }
    const person1 = new Person('Alice'); // person1 的 constructor 属性指向 Person 构造函数 
    console.log(person1.constructor === Person); // 输出: true


原型链

原型链是 JavaScript 中用于实现继承和属性查找的一种机制。每个对象都有一个原型对象(prototype),通过原型对象可以实现属性和方法的继承。当访问一个对象的属性或方法时,如果对象本身不存在这个属性或方法,JavaScript 引擎会沿着原型链向上查找,直到找到相应的属性或方法或者到达原型链的顶端(Object.prototype)为止。

当访问对象的属性或方法时,JavaScript 引擎会沿着原型链向上查找,直到找到相应的属性或方法或者到达原型链的顶端。如果找不到相应的属性或方法,则返回 undefined

注意事项

通过 new Object() 创建的对象,以及通过对象字面量创建的对象(如 {}),其原型是 Object.prototype。

函数也是对象,通过 new Function() 创建的函数对象,其原型是 Function.prototype。

通过 new Array()创建的数组对象,其原型是 Array.prototype。

Object.prototype 是原型链的顶端对象,它的原型是 null。

(考点)所有对象都有原型嘛?

不 Object.create(null)没有

结语

希望能让你对原型有更进一步的认识,好好学习,一起加油,能点个赞最好了。