前言

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

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扩展原型链浅析

源码地址

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

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

JavaScript扩展原型链浅析的更多相关文章

  1. javascript prototype原型链的原理

    javascript prototype原型链的原理 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: <script type="text/javasc ...

  2. Javascript的原型链图

    90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个_ ...

  3. javaScript系列 [04]-javaScript的原型链

    [04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...

  4. JavaScript的原型链继承__propt__、prototype、constructor的理解、以及他们之间相互的关系。

    回想自己已经工作了有一段时间了,但是自己对JavaScript的原型链.和继承的理解能力没有到位,最近他们彻底的整理并且复习了一遍. 本案例中部分文案来自网络和书籍,如有侵权请联系我,我只是把我的理解 ...

  5. javaScript(原型链)

    在了解javaScript的原型链之前,我们得先来看一下原型是什么. 在javaScript中,所有的函数都会有着一个特别属性:prototype(显示原型属性):当我们运行如下代码时: functi ...

  6. 理解JavaScript的原型链

    1. 什么是对象 在JavaScript中,对象是属性的无序集合,每个属性存放一个原始值.对象或函数. 1.1 创建对象 在JavaScript中创建对象的两种方法: ① 字面上: var myObj ...

  7. javascript 原型与原型链浅析

    原型 和原型链 什么是原型链 简单理解就是原型组成的链,对象的__proto__它的是原型,而原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过_ ...

  8. JavaScript对象原型链的学习

    1.构造函数和原型 1.1对象的三种创建方式 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(nam ...

  9. 深入浅出JavaScript之原型链&继承

    Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instanc ...

随机推荐

  1. SVN 提交失败: permission denied - txn-current-lock

    执行以下命令即可 sudo chown -R www-data:subversion myproject sudo chmod -R g+rws myproject

  2. 【缓存】Sql Server 2005/2008 SqlCacheDependency查询通知的使用总结

    Sql server 7.0/2000下 SqlCacheDependency使用轮询的方式进行缓存失效检查, 虽然ms说对服务器压力不大, 但还是有一些的, 而且对于不常改动的混存内容无休止的轮询感 ...

  3. 如何安装 JAVA 7 (JDK 7u75) 在 CentOS/RHEL 7/6/5 Fedora

    先下载JDK For 64 Bit:- # cd /opt/ # wget --no-cookies --no-check-certificate --header "Cookie: gpw ...

  4. WPF 控件截图位置不正确的问题

    用WPF的RenderTargetBitmap可以截取控件内容到一张图片上,但是实际使用的时候经常出现截取的位置不正确的问题.今天是第二次解决这个问题,所以记录下,免得再忘了. RenderTarge ...

  5. Android Studio快速开发之道(各种语法糖)

    现如今开发越来越追求效率和节奏,节省出时间做更多的事情,除了开发技术上的封装等,开发工具的使用技巧也是很重要的,今天就根据自己的经验来给大家介绍一下Android Studio快速开发之道. Post ...

  6. CentOS 6.4 64位 安装 jdk 6u45

    准备: 1.下载历史版本jdk 地址: http://java.sun.com/products/archive/ 下载的版本 jdk-6u45-linux-x64-rpm.bin  Linux x6 ...

  7. c#基础编程—泛型

    一.引言 泛型的主要思想是将算法与数据结构完全分离开,使得一次定义的算法能作用于多种数据结构,从而实现高度可重用的开发.泛型,通过参数类型化来实现在同一份代码中操作多种数据类型,利用“参数化类型”将类 ...

  8. [实战]挖掘CSRF姿势

    [-]CSRF是个什么鬼? |___简单的理解: |----攻击者盗用了你的身份,以你的名义进行某些非法操作.CSRF能够使用你的账户发送邮件,获取你的敏感信息,甚至盗走你的财产. |___CSRF攻 ...

  9. Html、CSS、JavaScript 实时效果在线编辑器 - 学习的好工具,算不算?!

    关于 二维码 与 NFC 之间的出身贫贱说 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...

  10. Newtonsoft.Json 时间格式化

    时间序列化经常多个T:“2017-01-23T00:00:00” 解决方案: 日期格式化输出,指定IsoDateTimeConverter的DateTimeFormat即可 IsoDateTimeCo ...