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

28次阅读

共计 2495 个字符,预计需要花费 7 分钟才能阅读完成。

前言

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

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); // 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 扩大原型链浅析

源码地址

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

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

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

正文完
 0