好奇代码的三木-Javascript+Nodejs全栈前端全能课

dfdghhy · · 125 次点击 · · 开始浏览    

好奇代码的三木-Javascript+Nodejs全栈前端全能课

 

 

获课♥》jzit.top/14350/

获取ZY↑↑方打开链接↑↑

在 JavaScript + Node.js 全栈前端课程里,原型与原型对象是极为重要的概念,它们构成了 JavaScript 独特的继承和对象系统。下面是对这两个概念的详细总结:

原型与原型对象的基本概念

1. 原型(Prototype)

原型是 JavaScript 实现继承的一种方式。每个对象都有一个内部属性

[[Prototype]]

(在浏览器环境中可以通过

__proto__

访问,但不建议在生产环境使用),它指向该对象的原型对象。当访问一个对象的属性或方法时,JavaScript 首先会在对象本身查找,如果找不到,就会沿着原型链向上查找,直到找到该属性或方法或者到达原型链的末尾(即

Object.prototype

)。

2. 原型对象(Prototype Object)

原型对象是一个普通的对象,它可以作为其他对象的原型。每个函数都有一个

prototype

属性,这个属性指向一个对象,这个对象就是使用该函数作为构造函数创建的所有实例对象的原型对象。原型对象可以包含属性和方法,这些属性和方法会被所有基于该原型创建的对象共享。

原型链继承

1. 原型链的形成

当一个对象的

[[Prototype]]

指向另一个对象时,就形成了原型链。例如,当使用构造函数创建一个对象时,该对象的

[[Prototype]]

会指向构造函数的

prototype

属性所指向的对象。如果该原型对象也有自己的原型,就会继续向上查找,直到到达

Object.prototype

,最终到

null

2. 示例代码

javascript

// 定义一个构造函数function Person(name) {    this.name = name;}// 在构造函数的原型对象上添加方法Person.prototype.sayHello = function() {    console.log(`Hello, my name is ${this.name}`);};// 创建一个 Person 对象const person1 = new Person('John');// 调用原型对象上的方法person1.sayHello(); // 查看 person1 的原型console.log(person1.__proto__ === Person.prototype); // trueconsole.log(Person.prototype.__proto__ === Object.prototype); // trueconsole.log(Object.prototype.__proto__ === null); // true

在这个例子中,

person1

对象的原型是

Person.prototype

Person.prototype

的原型是

Object.prototype

,而

Object.prototype

的原型是

null

,形成了一条原型链。

原型与继承的应用

1. 实现代码复用

通过将公共的属性和方法定义在原型对象上,可以让多个对象共享这些属性和方法,从而实现代码的复用。例如,在上面的例子中,所有通过

Person

构造函数创建的对象都可以共享

sayHello

方法。

2. 模拟类的继承

在 JavaScript 中,没有传统的类的概念,但可以通过原型链来模拟类的继承。例如:

javascript

// 定义一个父构造函数function Animal(name) {    this.name = name;}// 在父构造函数的原型对象上添加方法Animal.prototype.eat = function() {    console.log(`${this.name} is eating.`);};// 定义一个子构造函数function Dog(name) {    Animal.call(this, name); // 调用父构造函数}// 设置 Dog 的原型为 Animal 的实例Dog.prototype = new Animal();Dog.prototype.constructor = Dog;// 在 Dog 的原型对象上添加方法Dog.prototype.bark = function() {    console.log(`${this.name} is barking.`);};// 创建一个 Dog 对象const dog1 = new Dog('Buddy');// 调用父类和子类的方法dog1.eat(); dog1.bark();

在这个例子中,

Dog

构造函数通过原型链继承了

Animal

构造函数的属性和方法,同时还可以有自己的独特方法。

注意事项

1. 原型链的性能问题

由于原型链的查找机制,当访问一个对象的属性或方法时,可能需要沿着原型链向上查找,这会带来一定的性能开销。特别是在原型链较长的情况下,性能问题会更加明显。

2. 原型对象的修改

修改原型对象上的属性或方法会影响到所有基于该原型创建的对象。因此,在修改原型对象时需要谨慎,避免意外影响其他对象的行为。

总结

原型与原型对象是 JavaScript 中实现继承和对象系统的核心机制。通过原型链,JavaScript 可以实现代码复用和模拟类的继承。理解原型与原型对象的概念和使用方法,对于掌握 JavaScript 的面向对象编程和构建复杂的应用程序至关重要。

125 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传