JavaScript 原型链、prototype、__proto__详解
来源:互联网 发布:未来人类知乎 编辑:程序博客网 时间:2024/06/06 04:47
1、背景
Javascript的继承模型、原型链等等概念比较晦涩难懂, 很多人过去在使用Javascript的时候并没有刻意去搞明白其中的原理,今天笔者一步一步分析一下JavaScript中的继承、原型链、prototype、__proto__。 笔者并不打算写过多的文字解释原理,而是希望将原理总结成代码片段更便于理解。
2、JavaScript继承是如何实现的?
你只需要知道JavaScript 是通过名叫原型链的东西来实现继承的,依托于constructor.prototype属性(构造函数的prototype属性)即可。 你现在并不需要明白原型链是什么东西我会在下面一步一步详解。
3、 javascript通过prototype实现继承
function Animal() { this.echo=function () { console.log('I am An Animal....') }; this.value=1;}function Monkey() {}//将构造函数Monkey的prototype属性设置为一个Animal的对象,Monkey就拥有了Animal的所有属性和方法Monkey.prototype=new Animal();new Monkey().echo();console.log(new Monkey().value);
4、prototype、__proto__解析区别
我们知道在JavaScript中我们可以通过new 创建一个对象,我们是根据一个函数模板创建一个对象。也就是说如下代码
Animal函数便是函数模板,类似C++/java等的类的概念,然而 new Animal出来的就是对象的概念。
function Animal() { this.echo=function () { console.log('I am An Animal....') }; this.value=1;}
prototype是在构造函数(函数模板),也就是上面的Animal上设置的属性, 通过设置这个属性我们可以实现 继承。
__proto__属性是对象的一个属性,在ECMAScript规范中是不暴露的,但是有些浏览器可以访问到,对象的这个属性值就是函数模板的prototype值,
不知道这样说是不是不容易理解,换一个方式吧 :对象.__proro__===函数模板.prototype,前提这个对象时 这个函数new出来的。
5、通过设置上下文this的方式实现继承
我们都知道函数中在可以使用this引用当前上下文, 下面这段代码就是通过设置构造函数的上下文this的方式实现了继承,下面我给出两段代码分别仔细阅读下,琢磨一下代码所表达的意思。
代码1
function Animal() { this.echo=function () { console.log('I am An Animal....') }; this.value=1;}//创建一个字面对象 三个方式都创建了对象var obj1=new function () {};var obj2={};var obj3=[]//分别将三个对象设置成Animal构造函数的上下文 并且调用Animal函数,那么这个时候Animal函数中的this=obj1,obj2,obj3Animal.call(obj1);Animal.call(obj2);Animal.call(obj3);obj1.echo();obj2.echo();obj3.echo();代码2
function Animal() { this.echo=function () { console.log('I am An Animal....') }; this.value=1;}function Monkey() { Animal.call(this);}new Monkey().echo();
6、什么是原型链?
这个概念其实比较好理解,如果我们调用一个对象的一个方法,如何这个方法不存在那么就回去他的__proto__寻找,如果找到直接返回,如果没找到那么继续__proto__.__proto__中寻找,就像如下代码这样, B是如何找到value的。
代码1
var A={value:1};var B={};B.__proto__=A;console.log(B.value);
代码2
function A() { this.value=1;}function B() {}B.prototype=new A();console.log(new B().__proto__.value);
代码3
function A() { this.value=1;}function B() {}B.prototype=new A();console.log(new B().value);
7、总结一些关于JavaScript 继承、类型判断 、prototype的用法
判断一个字面定义数组的原型的类型,输出是[object Array]
Object.prototype.toString.call([1].__proto__)下面演示了数组和对象的关系, 原型链 []->Array->Object 下面返回true
Object.prototype===[].__proto__.__proto__调用字面数组的Object 原型的toString方法输出[object Object]
[].__proto__.__proto__.toString()直接调用Object原型方法toString 输出[object Object]
Object.prototype.toString([])通过call调用toString方法并且设置上下文获取真实类型
console.log(Object.prototype.toString.call([]));console.log(Object.prototype.toString.call(/x/));console.log(Object.prototype.toString.call(/x/));console.log([].__proto__.__proto__.toString.call(/x/ig));console.log([].__proto__.__proto__.toString.call(null));输出结果
[object Array][object RegExp][object RegExp][object RegExp][object Null]
参考文档
MDN
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof
1 0
- JavaScript 原型链、prototype、__proto__详解
- javascript 原型链详解 prototype和__proto__
- Javascript 原型、原型链、prototype以及__proto__详解
- JavaScript-原型链、prototype和__proto__属性详解
- Javascript原型(prototype)和原型链(__proto__)
- js 原型链 __proto__ prototype
- javascript中的原型链,prototype与__proto__的关系
- javascript中的 prototype, __proto__, constructor 与 原型继承链
- Javascript中的原型链、prototype、__proto__的关系
- prototype、__proto__与JavaScript的原型链继承
- JavaScript原型链__proto__与prototype的理解
- 详解js中的原型链,prototype与__proto__的关系
- Javascript 原型中的哲学思想 __proto__和prototype
- JavaScript prototype原型和原型链详解
- JavaScript-- prototype原型和原型链详解
- Javascript深度学习(js执行过程、js继承方式、__proto__、prototype、原型与原型链)
- javascript 中__proto__和prototype详解
- javascript 中__proto__和prototype详解
- 资源整理
- 1
- MyEclipse 注释模板设置
- HTML5 元素拖动
- -01-RGB彩色图像转换为灰度图像【ARM NEON加速】
- JavaScript 原型链、prototype、__proto__详解
- 【前端】typeof方法判断类型
- Codeforces Round #399:E. Game of Stones
- 欢迎使用CSDN-markdown编辑器
- 【bzoj1823】[JSOI2010]满汉全席 2-SAT
- 数据库设计三大范式
- C# 通过委托+异步的方式约束函数的执行超时时间
- POLL机制分析
- 大数据时代的技术hive:hive的数据类型和数据模型