重庆网站推广联系方式,百度搜索不到任何网站,个人网页设计手绘,企业网站建设源码HTML(三)、JavaScript原型链 原型链 在 JavaScript 中#xff0c;对象之间的继承是通过原型链来实现的。每个对象都有一个指向原型对象的内部链接#xff0c;也就是 [[Prototype]] 属性。这个链接的作用是如果对象本身没有某个属性或方法#xff0c;就会去它的原型对象上找… (三)、JavaScript原型链 原型链 在 JavaScript 中对象之间的继承是通过原型链来实现的。每个对象都有一个指向原型对象的内部链接也就是 [[Prototype]] 属性。这个链接的作用是如果对象本身没有某个属性或方法就会去它的原型对象上找如果还没有就会去原型对象的原型对象上找以此类推直到找到为止。这就形成了原型链。 原型链的实现 在 JavaScript 中我们可以通过构造函数来创建一个对象每个构造函数都有一个 prototype 属性它指向一个对象这个对象就是新对象的原型对象。通过 new 关键字调用构造函数时会创建一个新的对象并将它的原型对象指向构造函数的 prototype 属性所指向的对象。 下面是一个例子 // 定义一个构造函数function Person(name) { this.name name;}// 定义构造函数的原型对象Person.prototype.sayHello function() { console.log(Hello, my name is ${this.name});};// 创建一个对象const person new Person(John);// 调用对象的方法person.sayHello(); // 输出 Hello, my name is John 在这个例子中Person 构造函数有一个 prototype 属性指向一个对象这个对象有一个 sayHello 方法。当我们通过 new 关键字调用 Person 构造函数时会创建一个新对象 person并将它的原型对象指向 Person.prototype 所指向的对象。 因此当我们调用 person.sayHello() 方法时JavaScript 引擎会首先查找 person 对象本身是否有 sayHello 方法如果没有就会去它的原型对象 Person.prototype 上查找如果还没有就会去 Person.prototype 的原型对象 Object.prototype 上查找以此类推直到找到为止。 原型链的示意图 下面是一个原型链的示意图 ------------- | Object | ------------- ^ | ------------- | Prototype | ------------- ^ | ------------- | Prototype | ------------- ^ | ------------- | Prototype | ------------- ^ | ------------- | Person | ------------- ^ | ------------- | Prototype | ------------- ^ | ------------- | Prototype | ------------- ^ | ------- | john | ------- 以上代码示例展示了一个简单的原型链其中 Object是所有对象的基类也是原型链的起点 每个对象都有一个Prototype属性指向它的原型对象 原型对象也有一个Prototype属性指向它的原型对象 原型对象最终指向Object.prototype 通过原型链的方式子类可以访问父类原型上的属性和方法 在上述示例中john对象通过原型链可以访问到Person.prototype和Object.prototype上的属性和方法。 接下来我们来看一个实际的例子更好地理解原型链的实现。 function Person(name) { this.name name;}Person.prototype.sayHello function() { console.log(Hello, my name is this.name);};function Student(name, major) { this.name name; this.major major;}// 设置 Student 的原型对象为 Person 的实例Student.prototype new Person();Student.prototype.sayMajor function() { console.log(My major is this.major);};var student1 new Student(Alice, Mathematics);student1.sayHello(); // Hello, my name is Alicestudent1.sayMajor(); // My major is Mathematics 在这个例子中我们定义了 Person 和 Student 两个构造函数并且让 Student 的原型对象指向 Person 的一个实例。这个实例就构成了一个原型链它包含了 Student.prototype、Person.prototype 和 Object.prototype 三个节点构成了一个链式结构。 当我们调用 student1.sayHello() 方法时JavaScript 引擎首先在 student1 实例中查找 sayHello() 方法发现没有找到于是它继续在 Student.prototype 中查找仍然没有找到接着在 Person.prototype 中查找这次找到了 sayHello() 方法并调用。当调用完 sayHello() 方法后程序继续执行 student1.sayMajor() 方法这次 JavaScript 引擎会在 student1 实例中查找 sayMajor() 方法没有找到接着在 Student.prototype 中查找找到了 sayMajor() 方法并调用。 这个例子展示了原型链的实际应用通过原型链我们可以在子类中访问父类的属性和方法并且可以在子类中扩展新的属性和方法。原型链也是 JavaScript 中继承的基础实现机制之一。 最后再给出一个简单的总结原型链是由原型对象构成的链式结构JavaScript 引擎在查找属性或方法时会沿着原型链逐级查找直到找到或者查找到顶层为止。 共享资源关注公众号获取 本文由 mdnice 多平台发布
