走进JS,深入理解对象,构造函数与原型

72 阅读2分钟

js是一种动态类型,基于原型的语言,今天带大家深入走进原型,深入理解对象,构造函数和原型之间的关系,和他们的使用。

对象创建方式

对象字面量

  • 优点: 简单直接,适合快速创建单个对象

  • 缺点: 缺乏灵活性和复用性,每次创建对象都需要重复编写相同的属性和方法

image.png

ES6 class关键字

  • 优点:提供了类(class)这种给更高级别的对象,使代码清晰,易于维护
  • 缺点:在某些情况下没有函数和原型链灵活
  • class用于定义类然后通过new来创建类的实例,类是封装属性和方法的模板

image.png

ES5的构造函数

  • 优点: 他是ES6之前实现面对对象的主要编程方式
  • 缺点:相对于class 构造函数的语法更加繁琐
  • 构造函数是一种特殊的函数,他的函数名首字母通常大写与普通函数区分开来在构造函数内部,this 关键字指向新创建的对象。通过 new 运算符调用构造函数,可以创建该类的实例。

image.png

原型(prototype)

  • 原型链:每个对象都有一个与之关联的原型对象,该原型对象也可能有自己的原型,如此层层递进,形成一个链式结构,即原型链。
  • 共享方法:通过将方法定义在构造函数的 prototype 属性上,可以实现所有实例对象共享同一个方法,从而提高性能和内存利用率。
  • 函数对象的prototype属性:在JS中,函数也是一种对象,每个函数对象都有一个 prototype 属性,该属性指向一个原型对象。原型对象上定义了该函数创建的对象实例可以共享的方法。

image.png

三者关系

  • 构造函数:用于创建和初始化对象,是对象创建的基础。
  • 原型对象:通过原型链,实现了对象之间属性和方法的共享。原型对象上的方法和属性可以被所有实例对象访问和调用。
  • 实例对象:通过构造函数创建的对象,具有构造函数中定义的属性和方法,同时可以通过原型链访问原型对象上的方法和属性。

总结

  • JS中的对象创建方式有多种,包括对象字面量、ES6 class和ES5构造函数。
  • 原型链是JS实现对象属性和方法共享的重要机制。
  • 构造函数、原型对象和实例对象之间有着密切的关系,它们共同构成了JS面向对象编程的基础。
  • 在编写JS代码时,应深入理解这些概念,并灵活运用它们来创建高效、可维护的代码。