javascript中原型(prototype)与原型链

时间:2023-02-23 16:02:26

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...

  @三月沙 :理解JavaScript原型

  

  Tranch(from MDN):继承于原型链

更多知识分享:微笑空间站

javascript中原型(prototype)与原型链的更多相关文章

  1. JavaScript——中的prototype(原型)

    JS中的prototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...

  2. [js高手之路]一步步图解javascript的原型(prototype)对象,原型链

    我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this ...

  3. Javascript中的对象和原型(3)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  4. Javascript中的对象和原型(三)(转载)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  5. 原型prototype、原型链__proto__、构造器constructor

    创建函数时,会有原型prototype,有原型链__proto__,有constructor.(构造函数除外,没有原型) . prototype原型:是对象的一个属性(也是对象),使你有能力向对象添加 ...

  6. Javascript中的对象和原型(一)(转载)

    面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...

  7. JavaScript中的prototype和__proto__细致解析

    最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...

  8. 谈谈javascript中的prototype与继承

    谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...

  9. JavaScript中Object.prototype.toString方法的原理

    在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. ? 1 2 var arr = []; console.lo ...

  10. javascript中的对象,原型,原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

随机推荐

  1. myeclipse配置maven

    1.首先配置好java的运行环境(JDK要1.7及以上版本),网上有详细资料. 2.下载maven,具体下载链接http://maven.apache.org/download.html 3.下载ap ...

  2. Qt控件样式 Style Sheet Demo

    迟来的笔记,作为一个程序员每日记事已养成习惯,离开许久,不知不觉已喜欢用文字表达对技术的热爱,学无止境! Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使 ...

  3. jQuery原型方法first,last,eq,slice源码分析

    这4个方法中前3个方法很常用大家都见过,但是slice方法可能会以为是数组方法,其实slice也是jQuery的一个原型方法,只不过是底层方法是为其他方法服务的(更具体点是为eq方法服务的),首先还是 ...

  4. HDU 5860 Death Sequence

    用线段树可以算出序列.然后o(1)询问. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<c ...

  5. Golang丰富的I&sol;O----用N种Hello World展示

    h1 { margin-top: 0.6cm; margin-bottom: 0.58cm; direction: ltr; color: #000000; line-height: 200%; te ...

  6. 云&plus;社区分享——腾讯云OCR文字识别

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云+社区运营团队发布在腾讯云+社区 前言 2018年3月27日腾讯云云+社区联合腾讯云智能图像团队共同在客户群举办了腾讯云OCR文字识 ...

  7. ssh整合报错严重&colon; Context initialization failed org&period;springframework&period;beans&period;factory&period;BeanCreationException&colon; Error creating bean with name &&num;39&semi;xxx&&num;39&semi;

    错误描述:eclipse整合ssh的时候 报不能创建名字为xxx的对象 信息: Destroying singletons in org.springframework.beans.factory.s ...

  8. php编程 之 php基础三

    1,php里的while循环 循环执行代码块指定的次数,或者当指定的条件为真时循环执行代码块. while实例: <html> <body> <?php $i=1; wh ...

  9. as3&period;0中如何阻止事件冒泡

    原作者:菩提树下的杨过转载出处:http://yjmyzz.cnblogs.com 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究 ...

  10. BZOJ 2467&colon; &lbrack;中山市选2010&rsqb;生成树(矩阵树定理&plus;取模高斯消元)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2467 题意: 思路:要用矩阵树定理不难,但是这里的话需要取模,所以是需要计算逆元的,但是用辗转相减会 ...