深入JS原型与原型链
要了解原型和原型链,首先要理解普通对象和函数对象。
一、普通对象和函数对象的区别
在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码:
function f1(){};
var f2 = function(){};
var f3 = new function(){}; var o1 = {};
var o2 = new Object();
var o3 = new f1(); console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object
在上面的代码中可以看出,f1、f2和f3都是函数对象,而o1,o2和o3都是object对象,也就是普通对象,函数对象本质就是由new function()构造而来,其他的都是普通对象;函数对象和普通对象理解之后,后文会说明两者的区别。
二、原型
在JavaScript中,原型也是一个对象,原型的作用,则是实现对象的继承。
在js的所有函数对象中,都存在一个属性prototype,该属性对应当前对象的原型。
而所有的JavaScript对象,都存在一个_proto_属性(由于_proto_是个非标准属性,因此只有ff和chrome两个浏览器支持,标准方法是Object.getPrototypeOf()),_proto_属性指向实例对象的构造函数的原型,理解起来就如下:
var p = new Person(); console.log(p._proto === Person.prototype)//true
从上面代码可以看出,p是实例对象,Person是p的构造函数,可以看出来p的_proto_属性指向构造函数Person的原型。
下面用代码来解释一下js是如何通过原型进行继承的:
var parent = function(name){
this.name = name;
} parent.prototype.getName = function(){
return this.name;
} var son = new parent("huahua"); console.log(son.getName());//'huahua'
显然,son继承了parent的原型中的函数属性getName。
三、原型链
除开Object的prototype的原型是null以外,所有的对象和原型都有自己的原型,对象的原型指向原型对象。
在层级多的关系中,多个原型层层相连则构成了原型链。
在查找一个对象的属性时,倘若在当前对象找不到该属性,则会沿着原型链一直往上查找,知道找到为止,如果到了原型链顶端,还没找到,则返回undefined。
四、constructor
constructor是构造函数创建的实例的属性,该属性的作用是指向创建当前对象的构造函数。
例如,son.constructor == parent;//true
深入JS原型与原型链的更多相关文章
- Js 原型和原型链
Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...
- 【repost】JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...
- JS原型与原型链终极详解(转)
JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...
- 总结一下js的原型和原型链
最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...
- JS原型和原型链
1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...
- JS对象、原型链
忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...
- JS面向对象之原型链
对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...
- JS 原型与原型链
图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...
随机推荐
- 【Java疑难杂症】利用Java核心库实现简单的AOP
Spring是一个十分火热开源框架,而AOP(面向切面编程)则是Spring最重要的概念之一,为了更好的理解和学习AOP的思想,使用核心库来实现一次不失为一个好方法. 首先介绍一下AOP的概念,AOP ...
- Unity3D_GUI (1)--按钮控件
这是自己的第一篇记录自己的技术文章,自己还是个菜鸟,有错误之处还望大家能够多多指点. 下面记录的是自己在学GUI.Button的自己认知,这里用的是代码进行控制,当然当你学熟练了就可以直接使用GUI ...
- C#Winform设计的通用标签设计器
技术看点 PropertyGrid的使用 自定义控件的使用 对象序列化成XML GDI+Windows驱动打印 前言 是的,一不小心把公司名称透露了.索性帮公司打一下广告.公司(上海易溯信息科技)是中 ...
- 随机生成N个字符(包含数字和字母)
'************************************************************* ' Name: GetRandomString ' Purpose: 随机 ...
- BP算法从原理到python实现
BP算法从原理到实践 反向传播算法Backpropagation的python实现 觉得有用的话,欢迎一起讨论相互学习~Follow Me 博主接触深度学习已经一段时间,近期在与别人进行讨论时,发现自 ...
- webMagic+RabbitMQ+ES爬取京东建材数据
本次爬虫所要爬取的数据为京东建材数据,在爬取京东的过程中,发现京东并没有做反爬虫动作,所以爬取的过程还是比较顺利的. 为什么要用WebMagic: WebMagic作为一款轻量级的Java爬虫框架,可 ...
- C语言写单链表的创建、释放、追加(即总是在最后的位置增加节点)
昨天周末给学妹讲了一些指针的知识,本来我对指针就是似懂非懂的状态,经过昨天一讲,我对指针的学习就更深刻了 果然给别人讲课也是学习的一个方法.加上最近复习数据结构,发现我的博客里没有链表的博文,所以趁这 ...
- OBS源码解析(2)run_program函数
static int run_program(fstream &logFile, int argc, char *argv[]){ /*初始化和读取profile相关信息*/ int ret ...
- 二叉树的递归遍历 Tree UVa548
题意:给一棵点带权的二叉树的中序和后序遍历,找一个叶子使得他到根的路径上的权值的和最小,如果多解,那该叶子本身的权值应该最小 解题思路:1.用getline()输入整行字符,然后用stringstre ...
- (一)—Linux安装与硬盘分区
相信很多人对linux充满了喜爱,尤其是技术人员,玩惯了windows更想尝试一下这个系统.关于它的优点多多,当然,你的好你的坏,用过才明白!下面我这个菜鸟也来玩装个玩玩. 我不会那么冲动,上来就把自 ...