javascript原型链和继承
来源:互联网 发布:数据库更新语句 编辑:程序博客网 时间:2024/06/02 12:35
JavaScript 是一门动态语言,而且它没有类的概念(虽然 class 是个保留字,不能作为变量名来使用)。
继承方面,JavaScript 中的每个对象都有一个内部私有的链接指向另一个对象,这个对象就是原对象的原型。这个原型对象也有自己的原型,直到对象的原型为 null 为止(也就是没有原型)。这种一级一级的链结构就称为原型链。
基于原型链的继承
继承属性
继承方法
JavaScript 并没有真正的“方法”,JavaScript 只有函数,而且任何函数都可以添加到对象上作为对象的属性。继承的函数与其他的属性是基本没有差别的,包括“属性遮蔽”(这种情况相当于其他语言的方法重写)。
当继承的函数被调用时,this 指向的是当前继承原型的对象,而不是继承的函数所在的原型对象。
(1)使用普通语法创建对象
ECMAScript 5 中引入了一个新方法:Object.create。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数:
继承方面,JavaScript 中的每个对象都有一个内部私有的链接指向另一个对象,这个对象就是原对象的原型。这个原型对象也有自己的原型,直到对象的原型为 null 为止(也就是没有原型)。这种一级一级的链结构就称为原型链。
基于原型链的继承
继承属性
JavaScript 对象有两种不同的属性,一种是对象自身的属性,另外一种是继承于原型链上的属性。下面的代码则演示了当访问一个对象的属性时发生的行为:
// 假定我们有个对象o,并且o所在的原型链如下:// {a:1, b:2} ---> {b:3, c:4} ---> null// 'a'和'b'是o自身的属性.// 该例中,用"对象.[[Prototype]]"来表示这个对象的原型.// 这只是一个纯粹的符号表示(ECMAScript标准中也这样使用),不能在实际代码中使用.console.log(o.a); // 1// a是o的自身属性吗?是的,该属性的值为1console.log(o.b); // 2// b是o的自身属性吗?是的,该属性的值为2// o.[[Prototype]]上还有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽".console.log(o.c); // 4// c是o的自身属性吗?不是,那看看o.[[Prototype]]上有没有.// c是o.[[Prototype]]的自身属性吗?是的,该属性的值为4console.log(o.d); // undefined// d是o的自身属性吗?不是,那看看o.[[Prototype]]上有没有.// d是o.[[Prototype]]的自身属性吗?不是,那看看o.[[Prototype]].[[Prototype]]上有没有.// o.[[Prototype]].[[Prototype]]为null,原型链已到顶端,没有d属性,返回undefined
继承方法
JavaScript 并没有真正的“方法”,JavaScript 只有函数,而且任何函数都可以添加到对象上作为对象的属性。继承的函数与其他的属性是基本没有差别的,包括“属性遮蔽”(这种情况相当于其他语言的方法重写)。
当继承的函数被调用时,this 指向的是当前继承原型的对象,而不是继承的函数所在的原型对象。
var o = { a: 2, m: function(b){ return this.a + 1; }};console.log(o.m()); // 3// 当调用 o.m 时,'this'指向了o.var p = Object.create(o);// p是一个对象, p.[[Prototype]]是o.p.a = 12; // 创建p的自身属性a.console.log(p.m()); // 13// 调用p.m时, 'this'指向 p. 'this.a'则是12.
(1)使用普通语法创建对象
var o = {a: 1};// o这个对象继承了Object.prototype上面的所有属性// 所以可以这样使用 o.hasOwnProperty('a').// hasOwnProperty 是Object.prototype的自身属性.// Object.prototype的原型为null,如下:// o ---> Object.prototype ---> nullvar a = ["yo", "whadup", "?"];// 数组都继承于Array.prototype (indexOf, forEach,等方法都是从它继承而来).// 原型链如下:// a ---> Array.prototype ---> Object.prototype ---> nullfunction f(){ return 2;}// 函数都继承于Function.prototype(call, bind,等方法都是从它继承而来):// f ---> Function.prototype ---> Object.prototype ---> null(2)使用构造方法创建对象
在 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.(3)使用 Object.create 创建对象
ECMAScript 5 中引入了一个新方法:Object.create。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数:
var a = {a: 1}; // a ---> Object.prototype ---> nullvar b = Object.create(a);// b ---> a ---> Object.prototype ---> nullconsole.log(b.a); // 1 (继承而来)var c = Object.create(b);// c ---> b ---> a ---> Object.prototype ---> nullvar d = Object.create(null);// d ---> nullconsole.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype
性能
在原型链上查找属性比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。另外,试图访问不存在的属性时会遍历整个原型链。
遍历对象的属性时,原型链上的每个属性都是可枚举的。
0 0
- Javascript:继承和原型链
- javascript原型链和继承
- javascript原型链和继承
- JavaScript原型和继承
- JavaScript原型和继承
- Javascript原型和继承
- JavaScript原型和继承
- JavaScript 原型和继承
- JavaScript原型和继承
- JavaScript原型和继承
- JavaScript原型和继承
- javascript原型和继承
- javascript, 原型链,javascript 原型链方法,原型链继承,原型链和作用域链
- JavaScript:继承和原型链(译)
- javascript 原型链和继承(1)
- javascript 原型链和继承(2)
- 深入理解javascript原型链和继承
- javascript中的原型(链)和继承
- iOS笔记之_OC面向对象语法2
- 工具集合笔记
- 面试之SQL(2)--left join, inner join 和 right join的区别
- 【PLSQL】过程procedure的形参和实参
- pl/sql 配置
- javascript原型链和继承
- 第13章 增加404页面
- libgdx 游戏走起
- 图解Windows下开发Objective-C程序之二 - Objective-C入门例子
- cocos2dx v3.x C++绑定lua
- BZOJ 1076 [SCOI 2008] 奖励关 (概率与期望)
- 第14章 增加头像
- [150312]linux内核,驱动,应用程三者的概念和之间的关系
- 一切成功源于积累——20150312 2015年1月份-3月份 汇总篇