JS原型链详解
最近面试被问到了就决定好好深入理解原型链
对象
要清楚原型链,首先要弄清楚对象:
- 普通对象
- 最普通的对象:有__proto__属性(指向其原型链),没有prototype属性。
- 原型对象(person.prototype 原型对象还有constructor属性(指向构造函数对象))
- 函数对象:
- 凡是通过new Function()创建的都是函数对象。
拥有__proto__、prototype属性(指向原型对象)。
Function、Object、Array、Date、String、自定义函数
特例: Function.prototype(是原型对象,却是函数对象,下面会有解释)
- 函数对象
- function f1(){};
- var f2 = function(){};
- var f3 = function("n1","n2","return n1+n2");
- console.log(typeof f1); //function
- console.log(typeof f2); //function
- console.log(typeof f3); //function
- console.log(typeof Object); //function
- console.log(typeof Array); //function
- console.log(typeof String); //function
- console.log(typeof Date); //function
- console.log(typeof Function); //function
Array是函数对象,是Function的实例对象,Array是通过newFunction创建出来的。因为Array是Function的实例,所以Array.__proto__ === Function.prototype
- 普通对象
- var o1 = new f1();
- var o2 = {};
- var o3 = new Object();
- console.log(typeof o1); //Object
- console.log(typeof o2); //Object
- console.log(typeof o3); //Object
原型对象
每创建一个函数都会有一个prototype属性,这个属性是一个指针,指向一个对象(通过该构造函数创建实例对象的原型对象)。原型对象是包含特定类型的所有实例共享的属性和方法。原型对象的好处是,可以让所有实例对象共享它所包含的属性和方法。
- function person(){};
- console.log(typeof person.prototype) //Object
- console.log(typeof Object.prototype) // Object
- console.log(typeof Function.prototype) // 特殊 Function
- console.log(typeof Function.prototype.prototype) //undefined 函数对象却没有prototype属性
解释:
functionperson(){};
其实原型对象就是构造函数的一个实例对象。person.prototype就是person的一个实例对象。相当于在person创建的时候,自动创建了一个它的实例,并且把这个实例赋值给了prototype。
- function person(){};
- var temp = new person();
- person.prototype = temp;
- function Function(){};
- var temp = new Function();
- Function.prototype = temp; //由new Function()产生的对象都是函数对象
从一张图看懂原型对象、构造函数、实例对象之间的关系
- function Dog(){};
- Dog.prototype.name = "小黄";
- Dog.prototype.age = 13;
- Dog.prototype.getAge = function(){
- return this.age;
- }
- var dog1 = new Dog();
- var dog2 = new Dog();
- dog2.name = "小黑";
- console.log(dog1.name); // 小黄 来自原型
- console.log(dog2.name); // 小黑 来自实例
- //图中的一些关系
- dog1.__proto__ === Dog.prototype
- Dog.prototype.__proto__ === Object.prototype //继承Object 下面原型链说
- dog1.__proto__.__proto__ === Object.prototype
- Dog.prototype.constructor === Dog
- Dog.prototype.isPrototypeOf(dog1)
- 获取对象的原型
- dog1.__proto__ //不推荐
- Object.getPrototypeOf(dog1) === Dog.prototype //推荐
原型链
原型链是实现继承的主要方法。
先说一下继承,许多OO语言都支持两张继承方式:接口继承、实现继承。
|- 接口继承:只继承方法签名
|- 实现继承:继承实际的方法
由于函数没有签名,在ECMAScript中无法实现接口继承,只支持实现继承,而实现继承主要是依靠原型链来实现。
原型链基本思路:
利用原型让一个引用类型继承另一个引用类型的属性和方法。
每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数想指针(constructor),而实例对象都包含一个指向原型对象的内部指针(__proto__)。如果让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针(__proto__),另一个原型也包含着一个指向另一个构造函数的指针(constructor)。假如另一个原型又是另一个类型的实例……这就构成了实例与原型的链条。
原型链基本思路(图解):
举例说明:
- function animal(){
- this.type = "animal";
- }
- animal.prototype.getType = function(){
- return this.type;
- }
- function dog(){
- this.name = "dog";
- }
- dog.prototype = new animal();
- dog.prototype.getName = function(){
- return this.name;
- }
- var xiaohuang = new dog();
- //原型链关系
- xiaohuang.__proto__ === dog.prototype
- dog.prototype.__proto__ === animal.prototype
- animal.prototype.__proto__ === Object.prototype
- Object.prototype.__proto__ === null
图解:
详细图
从xiaohuang这个实例,看出整个链条
总结:
Xiaohuang这个Dog的实例对象继承了Animal,Animal继承了Object。
JS原型链详解的更多相关文章
- js 原型链详解
目录 构造函数和实例 属性Prototype 属性__proto__ 访问原型上的方法 构造函数也有__proto__ 构造函数的原型也有__proto__ Object.prototype这个原型对 ...
- JS原型链详解(2)
深入理解javascript原型链 在javascript中原型和原型链是一个很神奇的东西,对于大多数人也是最难理解的一部分,掌握原型和原型链的本质是javascript进阶的重要一环.今天我分享一下 ...
- 你不知道的JavaScript--Item15 prototype原型和原型链详解
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
- 《前端之路》之 JavaScript原型及原型链详解
05:JS 原型链 在 JavaScript 的世界中,万物皆对象! 但是这各种各样的对象其实具体来划分的话就 2 种. 一种是 函数对象,剩下的就是 普通对象.其中 Function 和 Objec ...
- js javascript 原型链详解
看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...
- JavaScript学习总结(五)原型和原型链详解
转自:http://segmentfault.com/a/1190000000662547 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量 ...
- JavaScript prototype原型和原型链详解
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
- JavaScript的面向对象原理之原型链详解
一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...
- javascript 原型及原型链详解
我们创建的每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个原型对象,而这个原型对象中拥有的属性和方法可以被所以实例共享. function Person(){ } Pe ...
随机推荐
- 浅谈使用canvas绘制多边形
本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改. //id为html里canvas标签的属性id: //x,y为坐标轴的起始位置,因为canvas默认坐 ...
- 对于call,apply,bind 的理解
JavaScript 中 call().apply().bind() 的用法 之前对与JavaScript中的call,apply,bind这几个方法一直理解的很模糊,今天总结一下. 例1 var n ...
- ORA-00911: invalid character 错误解决
多数情况如下: 控制面板--系统和安全---系统--高级系统设置--高级--环境变量--系统变量中 变量名:NLS_LANG 变量值:SIMPLIFIED CHINESE_CHINA.ZHS16GBK ...
- 2019南京网赛 The beautiful values of the palace(思维,树状数组
https://nanti.jisuanke.com/t/41298 题意:给一个n * n的螺旋矩阵,n保证是奇数,取一些点使其.获得价值,价值为数位和,然后再给q次查询,求矩阵中的价值总和 思路: ...
- maven 提取jar包 依赖及打包排除
<properties> <project.targetDir>D:\jar</project.targetDir> <project.targetServe ...
- hashlib模块subprocess模块
'''通过一种算法,将字符串得出一种编码内容相同则hash运算结果相同,内容稍微改变则hash值改变不可逆推相同算法,无论校验多长的数据,得到的hash值长度固定'''# import hashlib ...
- Test 7.12 T2
题目描述 有一张 n 个点 m 条边的无向图,其中有 s 个点上有加油站.有 Q 次询问(a,b,c), 问能否开一辆油箱容积为 c 的车从 a 走到 b. 输入格式 第一行三个整数 n,s, ...
- Linux系统下安装jenkins使用
jenkins 2.190.1 yum 安装 devops一梦千年 发布时间:10-0916:28 jenkins 2.190.1 yum 安装记录 安装环境: 所需安装包: https://pkg. ...
- linux运维、架构之路-网络基础
一. 常用网络设备 1.交换机:实现多台主机之间互相通讯的需求 交换机实现互相通讯的要求: ①主机身份标识信息:mac地址,利用源mac和目标mac地址,进行身份信息识别 ②主机通过交换机识别目标主机 ...
- 持续优化云原生体验,阿里云在Serverless容器与多云上的探索
近日,阿里云宣布推出Serverless Kubernetes服务此举意在降低容器技术的使用门槛.简化容器平台运维.并同时发布阿里云服务对Open Service Broker API标准支持,通过一 ...