1 var decimalDigits = 2,
2 tax = 5;
3
4 function add(x, y) {
5 return x + y;
6 }
7
8 function subtract(x, y) {
9 return x - y;
10 }
11
12 //alert(add(1, 3));

但是,这个并不能体现OOP思想,看了原型与原型链之后觉得OOP一目了然:

1  var Calculator = function (decimalDigits, tax) {
2 this.decimalDigits = decimalDigits;
3 this.tax = tax;
4 };

然后给Calculator的prototype属性赋值对象字面量来设定Calculator对象的原型。(个人觉得这里的原型就如同C#中类的概念,prototype则是用来给类添加属性,方法的)

 Calculator.prototype = {
add: function (x, y) {
return x + y;
}, subtract: function (x, y) {
return x - y;
}
};
//alert((new Calculator()).add(1, 3));

这样,通过new 一个对象就可以调用里面的公开的方法,属性。

原型使用方式2

当我们把一堆方法写到Calculator中,但是有些方法我们不想对外公开,即实现public/private,那么我们只能返回公开的方法:
 1 var Calculaotr = function(x, y) {
2 this.x = x;
3 this.y = y;
4 };
5 Calculaotr.prototype = function() {
6 add= function (x,y) {
7 return x + y;
8 },
9 subtract=function (x,y) {
10 return x - y;
11 }
12 return {
13 A:add,
14 S:subtract
15 }
16 }();

这里用利用函数自执行在加载文件同时,执行上面的JS代码,那么我们就可以访问对外公开的方法和属性,如果不通过自执行,则会报异常:

在C#中,我们可能会遇到这样的情况,类A的一个属性是类B型,在JS中,可以通过以下方式实现:

 1 var BaseCalculator = function() {
2 this.decimalDigits = 2;
3 };
4 BaseCalculator.prototype = {
5 A: function(x, y) {
6 return x + y;
7 },
8 S: function(x, y) {
9 return x - y;
10 }
11 };
12 var Calculator = function() {
13 this.tax = 3;
14 };
15Calculator.prototype = new BaseCalculator();

这里我们可以看到Calculator的原型是指向到BaseCalculator的一个实例上,目的是让Calculator集成它的add(x,y)和subtract(x,y)这2个function,

还有一点要说的是,由于它的原型是BaseCalculator的一个实例,所以不管你创建多少个Calculator对象实例,他们的原型指向的都是同一个实例。

如果我们不想让Calculator对象访问BaseCalculator的decimalDigits属性,可以这样:

var BaseCalculator = function() {
this.decimalDigits = 2;
};
BaseCalculator.prototype = {
A: function(x, y) {
return x + y;
},
S: function(x, y) {
return x - y;
}
};
var Calculator = function() {
this.tax = 3;
};
Calculator.prototype =new prototype;

通过以上两种原型使用方式,结合C#中的继承,不难想到JS中如何重写原型。

重写原型:

在项目中,引入外部JS库,但是有些方法并不是我们想要的,此时我们通过重写原型,就可以达到我们想要的结果:

//重写原型
Calculaotor.prototype.add = function(x, y) {
return x + y + this.tax;
}

原型链

 1 function Foo() {
2 this.value = 42;
3 }
4 Foo.prototype = {
5 method: function() {}
6 };
7
8 function Bar() {}
9
10 // 设置Bar的prototype属性为Foo的实例对象
11 Bar.prototype = new Foo();
12 Bar.prototype.foo = 'Hello World';
13
14 // 修正Bar.prototype.constructor为Bar本身
15 Bar.prototype.constructor = Bar;
16
17 var test = new Bar() // 创建Bar的一个新实例
18
19 // 原型链
20 test [Bar的实例]
21 Bar.prototype [Foo的实例]
22 { foo: 'Hello World' }
23 Foo.prototype
24 {method: ...};
25 Object.prototype
26 {toString: ... /* etc. */};

上面的例子中,test 对象从 Bar.prototype 和 Foo.prototype 继承下来;因此,它能访问 Foo 的原型方法 method。同时,它也能够访问那个定义在原型上的 Foo 实例属性 value。需要注意的是 new Bar() 不会创造出一个新的 Foo 实例,而是重复使用它原型上的那个实例;因此,所有的 Bar 实例都会共享相同的 value 属性。

属性查找

当查找一个对象的属性时,会遍历原型链,一直往顶层Object找,如果没有找到,则返回undefined.

 1  function foo() {
2 this.add = function (x, y) {
3 return x + y;
4 }
5 }
6
7 foo.prototype.add = function (x, y) {
8 return x + y + 10;
9 }
10
11 Object.prototype.subtract = function (x, y) {
12 return x - y;
13 }
14
15 var f = new foo();
16 alert(f.add(1, 2)); //结果是3,而不是13
17 alert(f.subtract(1, 2)); //结果是-1

以上add函数返回的是3,而不是13则说明,属性查找时,优先查找自己的属性。然后在往上一级找,最后找Object,这样看来,在遍历时用for in效率就是个问题。

还有一点,我们可以赋值任何类型的对象到原型上,但是不能赋值原子类型的值,比如如下代码是无效的:

function Foo() {}
Foo.prototype = 1; // 无效

hasOwnProperty函数

hasOwnProperty是判断一个对象是否包含自定义属性而不是原型链上的属性,是JS中唯一一个查找属性,但不查找原型链的函数。

但是JS不会保护hasOwnProperty函数,如果刚好某个对象中也有hasOwnProperty函数,则我们可以通过以下方式正确获得想要的结果:

alert({}.hasOwnProperty.call(c, 'tax'));//返回true

这里的c是Calculator的一个对象,tax是我们要找的属性。

当我面在for in loop 语句中查找属性时,用hasOwnProperty函数,提高效率:

1  Object.prototype.bar = 1;
2 var foo={moo : 1}
3 for (var i in foo) {
4 if(foo.hasOwnProperty(i)) {
5 alert(console.log(i));
6 }
7 }//此时只会输出moo属性

JS原型和原型链的更多相关文章

  1. Js 原型和原型链

    Js中通过原型和原型链实现了继承 Js对象属性的访问,首先会查找自身是否拥有这个属性 如果查到,则返回属性值,如果找不到,就会遍历原型链,一层一层的查找,如果找到就会返回属性值 直到遍历完Object ...

  2. 【repost】JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  3. JS原型与原型链终极详解

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  4. JS原型与原型链终极详解(转)

    JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...

  5. 总结一下js的原型和原型链

    最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...

  6. 深入JS原型与原型链

    要了解原型和原型链,首先要理解普通对象和函数对象. 一.普通对象和函数对象的区别 在Javascript的世界里,全都是对象,而对象之间也是存在区别,我们首先区分一下普通对象和函数对象,如下代码: f ...

  7. JS对象、原型链

    忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...

  8. JS面向对象之原型链

      对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...

  9. JS 原型与原型链

    图解: 一.普通对象 跟 函数对象 JavaScript 中,一切皆对象.但对象也有区别,分为 普通对象 跟 函数对象,Object 和 Function 是 JavaScript 自带的函数对象. ...

随机推荐

  1. 【.NET】上传文件,生成缩略图

    类名:Upload using System; using System.Collections; using System.ComponentModel; using System.Data; us ...

  2. Go-利用Map实现类似Python的Set数据结构

    该笔记参考<Go并发编程实战> 首先实现一个自定义的HashSet 利用interface{}作为键,布尔型作为值. package main import ( "bytes&q ...

  3. 写Java程序的三十个基本规则【新手必读】

    (1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符,其中包含的所有单词都应紧靠在一起,而且大写中间单词的首字母.例如:  ThisIsAClassName  this ...

  4. tomcat识别不出maven web项目

    解决办法: 点中项目-->Properties-->project facets 勾选:Dynamic Web Module.java.javaScript Apply-->OK 解 ...

  5. javaWEB总结(11):JSP简介及原理

    前言 本文主要通过一个简单小例子,介绍JSP的原理. 1.项目结构 2.web.xml <?xml version="1.0" encoding="UTF-8&qu ...

  6. 《JS权威指南学习总结--8.6 函数闭包》

    内容要点: 和其他大多数现代编程一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 为了实现这种词法作用域,JS函数对象的内部状 ...

  7. 常见编程语言对REPL支持情况小结[转]

    文章转载自http://www.nowamagic.net/librarys/veda/detail/2462 最近跟一个朋友聊起编程语言的一些特性,他有个言论让我略有所思:“不能REPL的都是渣”. ...

  8. reshape2 数据操作 数据融合( cast)

    我们在做数据分析的时候,对数据进行操作也是一项极其重要的内容,这里我们同样介绍强大包reshape2,其中的几个函数,对数据进行操作cast和melt两个函数绝对少不了. 首先是cast,把长型数据转 ...

  9. hdu_5618_Jam's problem again(cdq分治+lowbit)

    题目链接:hdu_5618_Jam's problem again 题意: 给你n个点,每个点有一个坐标(x,y,z),找出有ans个点,3个坐标都比该点小,这个点的level就为ans,然后让你输出 ...

  10. [SOJ] connect components in undirected graph

    题目描述: 输入一个简单无向图,求出图中连通块的数目 输入: 输入的第一行包含两个整数n和m,n是图的顶点数,m是边数.1<=n<=1000,0<=m<=10000. 以下m行 ...