JavaScript扩展原型链浅析

最新推荐文章于 2024-11-10 15:10:09 发布

wxystyle

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量99

点赞数

分类专栏： J2EE 文章标签： javascript 原型模式开发语言

原文链接：http://lewyon.xyz/createProto.html

版权

J2EE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

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

javaScript原型和原型链
 javaScript原型和原型链 - 程序员布欧 | 前端 | vue | react | JavaScript | 前端基础

扩展原型链

使用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