JavaScript中typeof和instanceof深入详解

理解原型

原型是一个对象,其他对象可以通过它实现属性继承。任何一个对象都可以成为继承,所有对象在默认的情况下都有一个原型,因为原型本身也是对象,所以

每个原型自身又有一个原型。任何一个对象都有一个prototype的属性,记为:__proto__。每当我们定义一个对象,其__proto__属性
就指向了其prototype。示例如下:


  1. var foo = { 
  2. x: 10, 
  3. y: 20 
  4. }; 

即使我们不指定prototype,该属性也会预留。如果我们有明确指向的话,那么链表就连起来了。需要注意的是,prototype自己也有指向,就是最高级的object.prototype。示例如下:


  1. var a = { 
  2. x: 10, 
  3. calculate: function (z) { 
  4. return this.x + this.y + z 
  5. }; 
  6. var b = { 
  7. y: 20, 
  8. __proto__: a 
  9. }; 
  10.  
  11. var c = { 
  12. y: 30, 
  13. __proto__: a 
  14. }; 
  15.  
  16. // call the inherited method 
  17. b.calculate(30); // 60 

使用原型

理解了原型的原理之后,如何使用原型呢?或者说原型有什么作用呢?

一般的初学者,在刚刚学习了基本的javascript语法后,都是通过面向函数来编程的。如下代码:


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

通过执行各个函数来得到最后的结果。但是利用原型,我们可以优化一些我们的代码,使用构造函数:

首先,函数本体中只存放变量:


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

其具体的方法通过prototype属性来设置:


  1. Calculator.prototype = { 
  2.     add: function (x, y) { 
  3.         return x + y; 
  4.     }, 
  5.  
  6.     subtract: function (x, y) { 
  7.         return x - y; 
  8.     } 
  9. }; 
  10. //alert((new Calculator()).add(1, 3)); 

这样就可以通过实例化对象后进行相应的函数操作。这也是一般的js框架采用的方法。

原型还有一个作用就是用来实现继承。首先,定义父对象:


  1. var BaseCalculator = function() { 
  2.     this.decimalDigits = 2; 
  3. }; 
  4.  
  5. BaseCalculator.prototype = { 
  6.     add: function(x, y) { 
  7.         return x + y; 
  8.     }, 
  9.     subtract: function(x, y) { 
  10.         return x - y; 
  11.     } 
  12. }; 

然后定义子对象,将子对象的原型指向父元素的实例化:


  1. var Calculator = function () { 
  2.     //为每个实例都声明一个税收数字 
  3.     this.tax = 5; 
  4. }; 
  5.  
  6. Calculator.prototype = new BaseCalculator(); 

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

上面的代码,运行以后,我们可以看到因为Calculator的原型是指向BaseCalculator的实例上的,所以可以访问他的
decimalDigits属性值,那如果我不想让Calculator访问BaseCalculator的构造函数里声明的属性值,那怎么办呢?只需要
将Calculator指向BaseCalculator的原型而不是实例就行了。代码如下:


  1. var Calculator = function () { 
  2.     this.tax= 5; 
  3. }; 
  4.  
  5. Calculator.prototype = BaseCalculator.prototype; 

在使用第三方库的时候,有时候他们定义的原型方法不能满足我们的需要,我们就可以自己添加一些方法,代码如下:


  1. //覆盖前面Calculator的add() function 
  2. Calculator.prototype.add = function (x, y) { 
  3.     return x + y + this.tax; 
  4. }; 
  5.  
  6. var calc = new Calculator(); 
  7. alert(calc.add(1, 1)); 

原型链

对象的原型指向对象的父,而父的原型又指向父的父,这种原型层层的关系,叫做原型链。

在查找一个对象的属性时,javascript会向上遍历原型链,直到找到给定名称的属性为止,当查找到达原型链的顶部,也即是Object.prototype,仍然没有找到指定的属性,就会返回undefined。

示例如下:


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

我们可以发现,subtrace是按照向上找的原则,而add则出了意外。原因就是,属性在查找的时候是先查找自身的属性,如果没有再查找原型。

说到Object.prototype,就不得不提它的一个方法,hasOwnProperty。它能判断一个对象是否包含自定义属性而不是原型链上的属性,它是javascript中唯一一个处理属性但是不查找原型链的函数。使用代码如下:


  1. // 修改Object.prototype 
  2. Object.prototype.bar = 1; 
  3. var foo = {goo: undefined}; 
  4.  
  5. foo.bar; // 1 
  6. 'bar' in foo; // true 
  7.  
  8. foo.hasOwnProperty('bar'); // false 
  9. foo.hasOwnProperty('goo'); // true 

而为了判断prototype对象和某个实例之间的关系,又不得不介绍isPrototyleOf方法,演示如下:


  1. alert(Cat.prototype.isPrototypeOf(cat2)); //true 

来源:51CTO

时间: 2024-10-25 10:48:18

JavaScript中typeof和instanceof深入详解的相关文章

JavaScript中reduce()方法的使用详解

  这篇文章主要介绍了JavaScript中reduce()方法的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 JavaScript 数组reduce()方法同时应用一个函数针对数组的两个值(从左到右),以减至一个值. 语法 ? 1 array.reduce(callback[, initialValue]); 下面是参数的详细信息: callback : 函数执行在数组中每个值 initialValue : 对象作为第一个参数回调的第一次调用使用 返回值: 返回数组的减少单一个值

JavaScript中的splice()方法使用详解

  这篇文章主要介绍了JavaScript中的splice()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 JavaScript数组的splice()方法改变数组的内容,增加了新的元素,同时消除旧元素. 语法 ? 1 array.splice(index, howMany, [element1][, ..., elementN]); 下面是参数的详细信息: index : 在该索引开始改变的数组. howMany : 整数,表示旧数组元素数去除.如果的howmany为0,没有元

JavaScript中的getDay()方法使用详解

  这篇文章主要介绍了JavaScript中的getDay()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 javascript Date.getDay()方法按照本地时间返回一周中的一天为所述指定的日期.通过getDay返回的值是对应于星期几的整数:0代表星期日,1代表星期一,2表示星期二,依此类推. 语法 ? 1 Date.getDay() 下面是参数的详细信息: NA 返回值: 按照本地时间返回星期几为指定日期. 例子: ? 1 2 3 4 5 6 7 8 9 10 11

JavaScript中的bold()方法使用详解

  这篇文章主要介绍了JavaScript中的bold()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法将导致就好像它是在一个标签的字符串显示为粗体. 语法 ? 1 string.bold( ) 下面是参数的详细信息: NA: 返回值: 返回字符串含有标签 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <title>JavaScript String bold() Method</

JavaScript中的small()方法使用详解

  这篇文章主要介绍了JavaScript中的small()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法导致要显示在一个小的字体,就好像它是在一个标记的字符串. 语法 ? 1 string.small( ) 下面是参数的详细信息: NA 返回值: 返回字符串标签 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <html> <head> <title>JavaScript String small() Method<

JavaScript中的lastIndexOf()方法使用详解

  这篇文章主要介绍了JavaScript中的lastIndexOf()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法调用String对象之内返回索引指定的值最后一次出现,开始搜索在的fromIndex或如果没有找到该值则返回-1. 语法 ? 1 string.lastIndexOf(searchValue[, fromIndex]) 下面是参数的详细信息: searchValue : 一个字符串,表示要搜索的值 fromIndex : 在调用字符串内的位置,从开始搜索.

JavaScript中的replace()方法使用详解

  这篇文章主要介绍了JavaScript中的replace()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 该方法找到一个正则表达式的字符串之间的匹配,并取代了匹配的子带的新的子串. 替换字符串可以包含以下特殊替换模式: 语法 ? 1 string.replace(regexp/substr, newSubStr/function[, flags]); 下面是参数的详细信息: regexp : 一个RegExp对象.匹配被替换参数的返回#2. substr : 一个字符串,由

JavaScript中的slice()方法使用详解

  这篇文章主要介绍了JavaScript中的slice()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法提取字符串的一部分,并返回一个新的字符串. 语法 ? 1 string.slice( beginslice [, endSlice] ); 下面是参数的详细信息: beginSlice : 从零开始的索引位置开始提取 endSlice : 从零开始的索引位置结束提取.如果省略,切片中提取的字符串的末尾 注意:作为一个负指数,endSlice表示从字符串末尾的偏移. s

JavaScript中的substr()方法使用详解

  这篇文章主要介绍了JavaScript中的substr()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 这个方法在一个字符串返回字符开始于通过指定的字符数的指定位置. 语法 ? 1 string.substr(start[, length]); 下面是参数的详细信息: start : 在位置开始提取字符(一个介于0和整数小于字符串的长度) length : 要用来提取的字符数 注意:如果start 是负数,substr 使用它作为从字符串的末尾字符索引 返回值: subst