关于javascript:JavaScript扩展原型链浅析

前言

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

javaScript原型和原型链
http://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); // parent1console.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增加本身的属性namechild.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); // parent2console.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); // parent1console.log(newChild.ObjName); // Obj

应用proto间接在原型链上操作，

应用__proto__操作，如果设置的属性和办法较多，会产生性能问题，因而不太举荐应用__proto__

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

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

小结

在应用原型链编写组件的过程中，咱们须要思考到原型链的性能问题。
实例化对象过程中，会向上查找原型链的办法和属性，在书写的过程中，须要留神构造函数和对象的自带的办法，确认是否会被笼罩和重写。

以上就是js中扩大原型链的简略解析，有任何问题欢送留言，后续的文章整顿而后作为补充。

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

源码地址

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

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

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

前言