关于原型和原型链的学习

渐进增强过程:

-> 刚学习js的时候,一般都是用如下的方式来写代码:

var  decimalDigits = 2,tax = 5;

function add(x, y){ return x + y;}

function subtract(x, y){return x - y;}

-> 学习了原型后,我们可以使用如下方式来美化代码:

var Calculator = function(decimalDigits, tax){

  this.decimalDigits = decimalDigits;

  this.tax = tax;

}

然后,通过Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。

Calculator.prototype = {

  add: function(x, y){return  x + y;}, 

  subtract: function(x, y){return x - y;}

}

这样,就可以new Calculator对象后,调用add等方法了。

-> 第二种方式,在赋值原型prototype的时候使用function立即执行的表达式来赋值,即如下格式:

Calculator.prototype = function(){}();

它的好处就是封装私有的function,通过return的形式暴露出简单的使用名称,以达到public/private的效果,修改代码如下:

Calculator.prototype = fucntion(){

  var add = function(x, y){

    return x + y;

  },

  subtract = function(x, y){

    return x - y;

  }

  return {

    add: add,

    subtract: subtract

  }

}();

->再来一点,分步声明:

上述使用原型的时候,有一个限制就是一次性设置了原型对象,我们再来说一下如何分开来设置原型的每个属性。

var BaseCalculator = function(){

  //为每一个实例都声明一个小数位数

  this.decimalDigits = 2;

}

//使用原型给BaseCalculator扩展2个对象方法

BaseCalculator.prototype.add = function(x, y){

  return x + y;

}

BaseCalculator.prototype.subtract = function(x, y){

  return x - y ;

}

var Calcalculator = function(){

  //为每个实例都声明一个税收数字

  this.tax = 5;

}

Calculator.prototype  = new BaseCalculator();

至此,Calculator的原型是指向到 BaseCalculator的一个实例上的,目的是让Calculator集成它add(x,y)和subtract(x,y)这2个function,还是有一点是:由于它的原型是BaseCalculator的一个实例,所以不管你创建多少个Calculator对象实例,他们的原型指向的都是同一个实例。

var calc = new Calculator();

calc.add(1,1);

calc.decimalDigits;

如果我们不想让Calculator访问BaseCalculator的构造函数里声明的属性值:

var Calculator = function(){

  this.tax = 5;

}

Calculator.prototype = BaseCalculator.prototype;

通过将BaseCalculator的原型赋值给Calculator的原型,这样你在Calculator的实例上 就访问不到那个decimalDigits值了。

-> 重写原型

在使用第三方JS类库的时候,往往有时候他们定义的原型方法不能满足我们的需求,但是又离不开这个类库,所以这时候我们就需要重写他们 的原型中的一个或者多个属性或function,我们可以通过继续声明的同样的add代码形式来达到覆盖重写前面add的功能,代码如下:

//覆盖前面的Calculator的add function

Calculator.prototype.add = function(x, y){

  return x + y + this.tax;

}

需要注意一点:那就是重写的代码需要放在最后,这样才能覆盖前面的代码。

-> hasOwnProperty函数

hasOwnProperty是Object.prototype的一个方法,它能判断一个对象是否包含自定义属性而不是原型链上的属性,因为hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数。

但是有个恶心的地方时:JS不会保护hasOwnProperty被非法占用,因此如果一个对象碰巧存在这个属性,就需要使用外部的hasOwnProperty函数来获取正确的结果。

var foo = {

  hasOwnProperty: function(){

    return false;

  },

  bar: ‘Here be dragons‘

};

foo.hasOwnProperty(‘bar‘);//总是返回false

//使用{}对象的hasOwnProperty并将其上下为设置为foo

{}.hasOwnProperty.call(foo,‘bar‘);//true

当检查对象上某个属性是否存在时,hasOwnProperty是唯一可用的方法。同时在使用for in loop遍历对象时,推荐总是使用hasOwnProperty方法,这将会避免原型对象扩展带来的干扰。

Object.prototype.bar = 1;

var foo = {moo:2}

for(var i in foo){

  console.log(i);//输出两个属性:bar和moo

}

我们没办法改变for in语句的行为,所以想过滤结果只能使用hasOwnProperty方法,代码如下:

for(var i in foo){

  foo.hasOwnProperty(i) && console.log(i);

}

时间: 2024-11-05 10:33:34

关于原型和原型链的学习的相关文章

JavaScript学习总结(五)原型和原型链详解

转自:http://segmentfault.com/a/1190000000662547 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数. <script type="text/javascript"> function Box(){ var color = "blue";//私有变量 var fn = function() //私有函数 { } } </script> 这

&lt;深入理解JavaScript&gt;学习笔记(5)_强大的原型和原型链

前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. (prototypal :原型.学好英语还是很重要的) 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多. 由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. 原型

JavaScript学习--Item15 prototype原型和原型链详解

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和

JavaScript原型与原型链学习笔记

一.什么是原型?原型是一个对象,其他对象可以通过它实现属性继承.简单的说就是任何一个对象都可以成为原型 prototype属性: 我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象包含可以有特定类型的所有实例共享的属性和方法.这个对象就是原型对象(也就是某个对象的原型所引用的对象).1.总之只要创建了函数,该函数都有一个prototype属性,指向函数的原型对象. 如上图,Person是一个函数,右侧的方框就是它的原型. 2.默认情况下所有原型对象都会

原型、原型链

原型和原型链的了解和掌握  在学习原型和原型链的时候有一点费劲,对我第一次学习来说有点绕.所以,今天来给大家说一下:  原型是什么: 原型是一个对象,其他对象可以通过它实现属性继承. 每一个对象都有一个属性叫prototype.   这个prototype的属性值是一个对象,默认的只有一个叫constructor的属性,指向这个函数本身.  原型方式:   该方式利用了对象的 prototype 属性,可以把它看成创建新对象所依赖的原型.  这里,首先用空构造函数来设置类名.然后所有的属性和方法

JavaScript 深入之从原型到原型链(转载)

构造函数创建对象 我们先使用构造函数创建一个对象: function Person() { } var person = new Person(); person.name = 'name'; console.log(person.name) // name 在这个例子中,Person就是一个构造函数,我们使用new创建了一个实例对象person. 很简单吧,接下来进入正题: prototype 每个函数都有一个prototype属性,就是我们经常在各种例子中看到的那个prototype,比如:

JavaScript(2)——对象属性、原型与原型链

对象属性.原型与原型链 哈哈哈,我的第二篇博客哟,说的是对象属性.原型与原型链.可能这些只是某些小点串联起来的,逻辑性没有很强.所以会对文章的可读性和理解性带来一些困扰.不过,今天我又前进了那么一小步,为之后的学习又打下了那么一丢丢的基础,虽然理解的不是特别好,不过我还会理解第二次,第三次.恩.加油! [对象] 对象中包含一系列的属性.这些属性都是无序的,每个属性都有一个字符串key和对应的value. 创建自定义对象的最简单方式就是创建一个object实例,然后再为它添加属性和方法. 属性类型

L--js原型和原型链

私有变量和函数 在函数内部定义的变量和函数如果不对外提供接口,外部是无法访问到的,也就是该函数的私有变量和函数. <script type="text/javascript"> function Box() { var color = "blue"; //私有变量 var fn = function() {}; //私有函数 } var obj = new Box(); alert(obj.color); //undefined alert(obj.fn

JavaScript深入系列(一)--原型和原型链详解

构造函数创建对象 首先我们先使用构造函数创建一个对象: function Person(){} var person = new Person(); person.name = 'tom'; console.log(person.name) //tom 在这个例子中,Person就是一个构造函数,我们使用new创建了一个实例对象person.接下来,进入正题: prototype 每个函数都有一个prototype属性,就是我们经常在各种例子中看到的那个prototype,比如: functio

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

最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型.譬如普通函数: function F(){ ; } alert(F.prototype instanceof Object) //true 构造函数,也即构造对象.首先了解下