JavaScript如何通过扩展原型链深入理解其机制？

本文共计1355个文字，预计阅读时间需要6分钟。

前言：本文对原型和原型链做了简要的概念介绍和解析，并对一些原型链的扩展进行了浅析。

原文：JavaScript原型和原型链http://lewyon.xyz/prototype.

扩展原型链使用new操作符利用原型是对象的一种属性，可以动态地添加属性和方法到对象上。当我们使用new操作符创建一个对象时，它会创建一个空对象，并将这个空对象的原型指向构造函数的原型。

javascriptfunction Person(name, age) { this.name=name; this.age=age;}

Person.prototype.sayName=function() { console.log(this.name);};

var person1=new Person('Tom', 20);var person2=new Person('Jerry', 22);

person1.sayName(); // Tomperson2.sayName(); // Jerry

利用原型是对对象的扩展，它使得对象可以继承原型上的属性和方法。在上面的例子中，我们通过构造函数Person创建了两个对象person1和person2，它们都继承了Person.prototype上的sayName方法。

原型链的扩展原型链是JavaScript中对象继承的一种机制，它允许一个对象继承另一个对象的方法和属性。在JavaScript中，每个对象都有一个隐式的原型（[[Prototype]]），这个隐式原型指向其构造函数的原型。

javascriptconsole.log(person1.__proto__===Person.prototype); // trueconsole.log(person2.__proto__===Person.prototype); // true

在上面的例子中，person1和person2的原型都指向了Person.prototype，这意味着它们可以访问Person.prototype上的方法和属性。

通过原型链，我们可以实现多个对象之间的继承关系。例如，我们可以创建一个Student类，继承自Person类。

javascriptfunction Student(name, age, grade) { Person.call(this, name, age); this.grade=grade;}

Student.prototype=new Person();Student.prototype.constructor=Student;Student.prototype.sayGrade=function() { console.log(this.grade);};

var student1=new Student('Lily', 18, 'A');student1.sayName(); // Lilystudent1.sayGrade(); // A

在这个例子中，Student类继承自Person类，通过设置Student.prototype为Person的实例，实现了Student类对Person类的方法和属性的继承。同时，我们还为Student类添加了一个sayGrade方法。

前言

上文对原型和原型链做了一些简单的概念介绍和解析，本文将浅析一些原型链的扩展。

javaScript原型和原型链
lewyon.xyz/prototype.html

扩展原型链 使用new操作符

利用原型是对象的特性，实例化对象的时候，继承多个构造函数的属性和方法

兼容性：支持目前以及所有可想象到的浏览器 (IE5.5 都可以使用)

function parent1() {} parent1.prototype = { parentName: "parent1", }; function parent2() {} let child = new parent1(); child.childName = "child"; parent2.prototype = child; let newChild = new parent2(); console.log(newChild.parentName); // parent1 console.log(newChild.childName); // child 使用Object.create Object.create

Object.create() 方法创建一个新对象，使用现有的对象来提供新创建的对象的 proto

兼容性：支持当前所有非微软版本或者 IE9 以上版本的浏览器

/** * * Object.create(proto，[propertiesObject]) * * @params proto 新创建对象的原型对象。 * 如果proto参数不是 null 或非原始包装对象，则抛出一个 TypeError 异常，可以使用try和catch捕获抛出的异常 * * @params propertiesObject 可选参数 ，数据类型：对象 * * */ const parent1 = { name: "parent1", do: function () { console.log(this.name); }, }; const child = Object.create(parent1); child.name = "child"; // child添加自身的属性name child.do(); // child

/** * * * *--------------------------------------------------------------------------------------- * * * */ function parent2() {} parent2.prototype = { name: "parent2", }; function parent3() {} let child = Object.create(parent2.prototype); child.childName = "child"; parent3.prototype = child; let newChild = new parent3(); console.log(newChild.name); // parent2 console.log(newChild.childName); // child

---

使用setPrototypeOf

兼容性：不支持 IE8 以下的版本。

/** * Object.setPrototypeOf(obj, prototype) * * @params obj 要设置其原型的对象。 * * @params prototype * * 该对象的新原型 (一个对象 或 null) * 如果要设置原型的对象的 [[Prototype]] 被修改成不可扩展 (通过 Object.isExtensible()查看)，就会抛出 TypeError 异常。 * 如果 prototype 参数的数据类型不是 对象或者 null (例如，数字，字符串，boolean，或者 undefined)，那么方法就不会执行。 * 否则，该方法将 obj 的 [[Prototype]] 修改为新的值。 * * Object.setPrototypeOf() 是 ECMAScript 6中新增的方法，相对于操作对象的原型链Object.prototype.__proto__来说，更适合拿来修改对象的原型 * * * */ function parent1() {} parent1.prototype = { name: "parent1", }; function parent2() {} let Obj = { ObjName: "Obj", }; Object.setPrototypeOf(Obj, parent1.prototype); parent2.prototype = Obj; let newChild = new parent2(); console.log(newChild.name); // parent1 console.log(newChild.ObjName); // Obj

---

使用__proto__直接在原型链上操作，

使用__proto__操作，如果设置的属性和方法较多，会产生性能问题，因此不太推荐使用__proto__

兼容性：IE10 及以下的浏览器版本。

/** * * 直接在原型链上操作，如果设置的属性和方法较多，会产生性能问题 * * */ var obj = { __proto__: { protoName1: "protoName1", __proto__: { protoName2: "protoName2", __proto__: Object.prototype, }, }, }; console.log(obj.protoName1); // protoName1 console.log(obj.protoName2); // protoName1 小结

• 在使用原型链编写组件的过程中，我们需要考虑到原型链的性能问题。
• 实例化对象过程中，会向上查找原型链的方法和属性，在书写的过程中，需要注意构造函数和对象的自带的方法，确认是否会被覆盖和重写。

以上就是js中扩展原型链的简单解析，有任何问题欢迎留言，后续的文章整理然后作为补充。

文章博客地址：JavaScript扩展原型链浅析

源码地址

• 码云 gitee.com/lewyon/vue-note
• githup github.com/akari16/vue-note

欢迎关注公众号：程序员布欧，不定期更新一些文章

创作不易，转载请注明出处和作者。