javascript中原型(prototype)与原型链
javascript是一门动态语言(动态语言Dynamic Programming Language:动态类型语言,意思就是类型的检查是在运行时做的,也就是常说的“弱类型”语言),没有类的概念,有class保留字,但不能用作变量名
原型:Javascript中的每一个对象都有一个内部私有的连接指向另一个对象,这个对象就是原对象的原型 注意:原型是一个对象,其他对象可以通过他实现属性继承
原型链:这个原型对象也有自己的原型,直到对象的原型为null为止(也就是没有原型),这种一级一级的链结构就称为原型链
javascript中对象:在javascript中,一个对象就是任何无序键值对的集合,如果它不是一个主数据类型(undefined,null,boolean,number,string),那它就是一个对象
在这里一旦当某个对象的原型所引用的对象的属性被定义,就可以被多个引用它的实例所继承,即这些实例对象的原型所指向的就是这个原型对象。
基于原型链的继承:
继承属性:
javascript对象有两种不同的属性来源,一个是对象自身属性,另一是继承于原型链上的属性
例:
//假设有一个对象obj={a:1,b:2},并且obj所在的原型链如下:
//{a:1,b:2} ---> {b:3,c:4} ---> null
//a,b是obj自身的属性
//本例中,用“对象.[[Prototype]]”来表示这个对象的原型
alert(obj.a);
//输出1 证明a是obj自身的属性
alert(obj.b);
//输出2 证明b是obj自身的属性
//在obj.[[Prototype]]中还有一个‘b’属性,但它不会被访问到。这种情况称为“属性遮蔽”。
alert(obj.c);
//输出4 c不是obj自身的属性,但是obj.[[prototype]]的属性
alert(obj.d);
//输出undefined d既不是obj自身的属性,也不是obj.[[prototype]]的属性
//也不是obj.[[prototype]].[[prototype]](即null)的属性,原型链已到顶端,没有d属性,返回undefined
继承函数:
javascript中任何函数都可以添加到对象上作为对象的属性。继承函数与继承属性基本没差别,包括“属性遮蔽”(相当于其他语言中的方法重写) 注意:当继承的函数被调用时,this指向的是继承的对象,而不是函数被声明的原型对象
例:
var obj={
a:2,
m:function(b){
return this.a+1;
}
};
alert(obj.m()); //输出3,当调用obj.m时,‘this’指向了obj
var p=Object.create(obj); //p是一个对象,p.[[Prototype]]是obj
p.a=12; //创建p的自身属性a
alert(p.m()); //输出13,当调用p.m时,‘this’指向了p,‘this.a’则是12
创建对象和生成原型链的不同方法:
使用普通方法创建对象:
例:
var obj={a:1};
//obj这个对象继承了Object.prototype上面的所有属性,所以可以使用obj.hasOwnProperty('a')
//hasOwnProperty是Object.prototype的自身属性,而Object.prototype的原型为null,如下:
//obj ---> Object.prototype ---> null
var a=["one","two","three"];
//数组都继承于Array.prototype,继承者继承其一些方法,如:indexOf,forEach,原型链如下:
//a ---> Array.prototype ---> Object.prototype --->null
function F(){
return 2;
}
//函数都继承于Function.prototype,继承者继承其一些方法,如:call,bind,原型链如下:
//F ---> Function.prototype ---> Object.prototype --->null
使用构造函数创建对象:
javascript中,构造方法其实就是一个普通的函数。当时用new操作符来作用这个函数时,它就可以被称为构造函数
例:
function Graph(){
this.vertexes=[];
this.edges=[];
}
Graph.prototype={
addVertex:function(v){
this.vertexes.push(v);
}
};
var g=new Graph();
//g是生成的对象,他的自身属性有‘vertexes’和‘edges’
//g被实例化时,g.[[Prototype]]指向了Graph.prototype
使用Object.create创建对象:
ECMAScript 5 中引入了一个新的方法:Object.create 。可以调用这个方法来创建一个新对象。新对象的原型就是调用create方法时传入的第一个参数:
例:
var a={a:1};
//a ---> Object.prototype ---> null
var b=Object.create(a);
//b ---> a ---> Object.prototype ---> null
alert(b.a);
//输出1 (继承而来)
var c=Object.create(b);
//c ---> b ---> a ---> Object.prototype ---> null
var d=Object.create(null);
//d ---> null
alert(d.hasOwnProperty);
//输出undefined,因为d没有继承Object.prototype
性能:
在原型链上查找属性比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。另外,试图访问不存在的属性时会遍历整个原型链。
遍历对象的属性时,原型链上的每个属性都是可枚举的。
检测对象的属性是定义在自身上还是在原型链上,有必要使用 hasOwnProperty 方法,该方法由所有对象继承自 Object.proptotype。
hasOwnProperty 是 JavaScript 中唯一一个只涉及对象自身属性而不会遍历原型链的方法
相关文章:
Angus Croll:JavaScript,JavaScript...
Tranch(from MDN):继承于原型链
更多知识分享:微笑空间站
javascript中原型(prototype)与原型链的更多相关文章
- JavaScript——中的prototype(原型)
JS中的prototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this ...
- Javascript中的对象和原型(3)
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- Javascript中的对象和原型(三)(转载)
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- 原型prototype、原型链__proto__、构造器constructor
创建函数时,会有原型prototype,有原型链__proto__,有constructor.(构造函数除外,没有原型) . prototype原型:是对象的一个属性(也是对象),使你有能力向对象添加 ...
- Javascript中的对象和原型(一)(转载)
面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...
- JavaScript中的prototype和__proto__细致解析
最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...
- 谈谈javascript中的prototype与继承
谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...
- JavaScript中Object.prototype.toString方法的原理
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. ? 1 2 var arr = []; console.lo ...
- javascript中的对象,原型,原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
随机推荐
- JS函数节流
背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...
- hdu 1358 Period
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1358 思路:Next数组的用法,在第i个位置上如果有i%(i-Next[i])==0的话最小循环节就是 ...
- sql server 对象资源管理器(二)
SQL会缓存大量的数据页面,他还会缓存很多其他信息,包括存储过程的执行计划 ,特定用户的安全上下文等 如果这些信息没有在数据库中缓存,SQL都要重新计算一遍,花额外的时间,所以SQLSERVER对内存 ...
- Oracle insert大量数据经验之谈(转)
在很多时候,我们会需要对一个表进行插入大量的数据,并且希望在尽可能短的时间内完成该工作,这里,和大家分享下我平时在做大量数据insert的一些经验. 前提:在做insert数据之前,如果是非生产环境, ...
- Java集合---Array类源码解析
Java集合---Array类源码解析 ---转自:牛奶.不加糖 一.Arrays.sort()数组排序 Java Arrays中提供了对所有类型的排序.其中主要分为Prim ...
- javascript数组去重的两个方法
方法一: 创建一个临时数组,判断目标数组中每个元素是否在临时数组中,如果不在就添加进临时数组,最后return临时数组 <script> var arr=[1,2,3,4,5,1,2,3, ...
- MySQL 分组后,统计记录条数
分组后,统计记录条数: SELECT num,count(*) AS counts from test_a GROUP BY num; 查询结果如下: 对num去重后的数量的统计: SELECT co ...
- SOAPUI使用教程-创建MockResponse步骤
MockResponse测试步骤监听一个SOAP请求并返回一个预先配置的响应,然后再继续. 传入的请求的能被断言检查. 这种TestStep使用场景是例如: 客户端测试,验证传入的请求并返回假或不正确 ...
- 洛谷 P2735 电网 Electric Fences Label:计算几何--皮克定理
题目描述 在本题中,格点是指横纵坐标皆为整数的点. 为了圈养他的牛,农夫约翰(Farmer John)建造了一个三角形的电网.他从原点(0,0)牵出一根通电的电线,连接格点(n,m)(0<=n& ...
- java的poi技术读取Excel[2003-2007,2010]
这篇blog主要是讲述java中poi读取excel,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为:xls和xlsx. 读取excel和MySQL相关: ja ...