企业官网建设流程全解析

网站开发系统设计怎么写,网站建设市场占有率,做论坛网站时应该注意什么,制作一个网站的需要多少钱引言在 JavaScript 的世界中#xff0c;继承是通过 原型#xff08;prototype#xff09;和 原型链#xff08;prototype chain#xff09;机制实现的。与传统面向对象语言#xff08;如 Java、C#xff09;不同#xff0c;JavaScript 并没有真正意义上的“类继承”概念…引言在 JavaScript 的世界中继承是通过原型prototype和原型链prototype chain机制实现的。与传统面向对象语言如 Java、C不同JavaScript 并没有真正意义上的“类继承”概念——即使ES6引入了class语法它本质上也只是对原型继承的语法糖封装。JavaScript 的核心继承模型是基于对象的委托机制即一个对象可以通过其内部的[[Prototype]]链访问另一个对象的属性和方法。本文将系统、深入地介绍 JavaScript 中几种常见的基于原型和原型链的继承方式并重点解析其中“使用空对象作为中介”的经典模式——寄生组合式继承帮助你彻底掌握 JS 面向对象编程的底层逻辑。一、基本概念回顾1. 原型Prototype在 JavaScript 中每个函数function都有一个prototype属性该属性指向一个对象。当这个函数被用作构造函数通过new调用时所创建的实例对象会自动将其内部[[Prototype]]可通过__proto__访问链接到该prototype对象上。function Parent() {} console.log(Parent.prototype); // { constructor: Parent } const p new Parent(); console.log(p.__proto__ Parent.prototype); // true注意普通对象没有prototype属性只有函数才有。但所有对象包括函数都有__proto__或可通过Object.getPrototypeOf()获取用于构成原型链。2. 原型链Prototype Chain当访问一个对象的属性如obj.prop时JavaScript 引擎会执行以下查找过程先在对象自身查找如果找不到则沿着__proto__向上查找其原型继续向上直到找到该属性或到达原型链顶端null为止。const obj {}; console.log(obj.toString); // obj 自身没有 toString但 // obj.__proto__ → Object.prototype → 找到 toString 方法 // 最终输出function toString() { [native code] }这种链式查找机制就是原型链它是 JavaScript 实现继承的核心。二、常见的基于原型的继承方式1. 原型链继承Prototype Chain Inheritance这是最基础的继承方式让子类的prototype指向父类的一个实例。function Parent() { this.name parent; this.colors [red, blue]; // 引用类型属性 } Parent.prototype.say function() { console.log(Hello from parent); }; function Child() {} // 关键Child.prototype 指向 Parent 的一个实例 Child.prototype new Parent(); const child1 new Child(); const child2 new Child(); child1.colors.push(green); console.log(child2.colors); // [red, blue, green] 被污染 child1.say(); // Hello from parent问题分析引用属性共享colors数组存在于Child.prototype上所有子实例共享同一份数据。无法传参创建Child实例时无法向Parent构造函数传递参数。语义不清晰Child.prototype包含了本应属于实例的属性如name造成冗余。此方式仅适用于无状态、纯方法复用的场景实际开发中极少单独使用。2. 构造函数继承借用构造函数 / Classical Inheritance通过在子构造函数内部调用父构造函数使用.call()或.apply()实现属性的“复制式”继承。function Parent(name) { this.name name; this.colors [red, blue]; } function Child(name) { Parent.call(this, name); // 借用父构造函数this 指向新创建的 Child 实例 } const child1 new Child(Alice); const child2 new Child(Bob); child1.colors.push(green); console.log(child2.colors); // [red, blue] 独立副本优点每个实例拥有独立的属性避免引用类型污染支持向父类传参。缺点无法继承父类原型上的方法。例如Parent.prototype.say对Child实例不可见方法无法复用若在构造函数内定义方法每个实例都会创建一份新函数浪费内存。适合只关心属性继承、不依赖原型方法的场景。3. 组合继承Combination Inheritance结合前两种方式的优点用构造函数继承属性用原型链继承方法。function Parent(name) { this.name name; this.colors [red, blue]; } Parent.prototype.say function() { console.log(Hi, I am this.name); }; function Child(name, age) { Parent.call(this, name); // 继承属性可传参不共享 this.age age; } // 继承方法设置 Child.prototype 为 Parent 实例 Child.prototype new Parent(); // 问题这里会无参调用 Parent() Child.prototype.constructor Child; // 修复 constructor 指向 const child new Child(Tom, 10); child.say(); // Hi, I am Tom优点属性独立不共享引用类型方法复用通过原型支持传参instanceof和isPrototypeOf正常工作。缺点父构造函数被调用了两次第一次Parent.call(this, name)—— 正确初始化实例属性第二次new Parent()—— 在设置原型时无意义地创建了一个冗余的父实例其属性如name: undefined被挂在Child.prototype上造成内存浪费。尽管有缺陷组合继承曾是 ES5 时代最常用的继承模式。三、重点解析空对象作为中介的继承方式寄生组合式继承为了解决组合继承中父构造函数被调用两次的问题寄生组合式继承Parasitic Combination Inheritance应运而生。这是《JavaScript 高级程序设计》作者 Nicholas C. Zakas 推荐的最高效、最理想的 ES5 继承方式。核心思想不通过new Parent()创建子类原型而是创建一个“干净”的空对象让这个空对象的原型指向Parent.prototype。这样既能建立正确的原型链又避免执行Parent构造函数从而消除冗余属性。实现步骤详解function inheritPrototype(Child, Parent) { // Step 1: 创建一个空的构造函数 F中介 function F() {} // Step 2: 将 F 的 prototype 指向 Parent.prototype // 这样 F 的实例就能“继承” Parent.prototype 上的所有方法 F.prototype Parent.prototype; // Step 3: 将 Child.prototype 设置为 F 的一个实例 // new F() 是一个空对象其 __proto__ 指向 Parent.prototype // 它不包含 Parent 构造函数初始化的任何实例属性如 name、colors Child.prototype new F(); // Step 4: 修复 constructor确保 Child.prototype.constructor 指向 Child // 否则会错误地指向 Parent因为 F.prototype Parent.prototype Child.prototype.constructor Child; }完整使用示例function Parent(name) { this.name name; this.colors [red, blue]; } Parent.prototype.say function() { console.log(Parent says:, this.name); }; function Child(name, age) { Parent.call(this, name); // 借用构造函数继承属性仅调用一次 this.age age; } // 使用空对象中介实现原型继承 inheritPrototype(Child, Parent); const child new Child(Lucy, 8); child.say(); // Parent says: Lucy // 验证继承关系 console.log(child instanceof Parent); // true console.log(child instanceof Child); // true console.log(child.constructor Child); // true console.log(child.colors); // [red, blue]来自实例非原型 // 检查原型链 console.log(child.__proto__ Child.prototype); // true console.log(Child.prototype.__proto__ Parent.prototype); // true为什么这种方式更优优势说明✅ 只调用一次父构造函数仅在 Parent.call(this, name) 中执行无冗余✅ 子类原型干净Child.prototype 上没有 name、colors 等实例属性✅ 完整保留原型链child → Child.prototype → Parent.prototype → Object.prototype → null✅ 内存高效避免了组合继承中在原型上存储无用属性的问题✅ 语义正确属性归实例方法归原型职责分明关键理解new F()创建的对象是一个“空壳代理”它唯一的使命是作为桥梁将Child.prototype的__proto__指向Parent.prototype而不携带任何由Parent构造函数初始化的数据。四、现代替代方案Object.create()ES5 标准引入了Object.create(proto, [propertiesObject])方法可以直接创建一个以指定对象为原型的新对象。这使得寄生组合式继承的实现更加简洁function Child(name, age) { Parent.call(this, name); this.age age; } // 使用 Object.create 替代中介函数 Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child;Object.create(Parent.prototype)的效果等同于new F()其中F.prototype Parent.prototype但由引擎原生实现更安全、更高效。此外还可以封装一个通用继承函数function extend(Child, Parent) { Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child; }五、补充原型式继承Prototypal Inheritance虽然不属于“类式继承”但Object.create()也支持直接基于现有对象创建新对象这体现了 JavaScript真正的原型继承思想const person { name: Anonymous, friends: [Alice], greet() { console.log(Hi, Im ${this.name}); } }; const me Object.create(person); me.name John; me.friends.push(Bob); console.log(me.name); // John console.log(person.friends); // [Alice, Bob] 共享引用 // 若需深拷贝属性可配合属性描述符或后续赋值此方式适用于无需构造函数、只需对象复用的场景如配置模板、默认选项等。六、总结对比表继承方式是否共享引用属性能否传参能否继承原型方法父构造函数调用次数是否推荐原型链继承是否是1设置原型时❌构造函数继承否是否1子构造中⚠️ 局限组合继承否是是2⚠️ 可用但非最优寄生组合式继承空对象中介否是是1✅ 强烈推荐ES5原型式继承Object.create是否是来自源对象0✅ 特定场景适用七、最佳实践建议在 ES5 环境中优先使用寄生组合式继承可通过Object.create(Parent.prototype)简化实现。在 ES6 环境中直接使用class extends语法它在底层正是基于寄生组合式继承实现的class Parent { constructor(name) { this.name name; } say() { console.log(Hi from, this.name); } } class Child extends Parent { constructor(name, age) { super(name); // 相当于 Parent.call(this, name) this.age age; } }永远记住JavaScript 的继承不是“复制”而是“委托”。理解[[Prototype]]链的查找机制比死记语法更重要。结语原型和原型链是 JavaScript 面向对象编程的基石。掌握“空对象作为中介”的寄生组合式继承不仅能写出高效、健壮的代码更能深入理解这门语言的设计哲学——万物皆对象继承靠委托。