1. 面向对象的属性、方法、操作符总结,都是干货。想深入掌握面向对象的程序设计模式,必须掌握一下知识点。下列知识点注重于实现,原理还请借鉴《javascript高级程序设计》
  2. (基于javascript高级程序设计,总结出来的实用,常用方法属性和操作符)

1、标识构造函数对象实例的类型(构造函数的属性和操作符)

对象实例.constructor == 构造函数对象

构造函数源码

在前面例子的最后,person1 和 person2 分别保存着 Person 的一个不同的实例。这两个对象都有一个 constructor(构造函数)属性,该属性指向 Person,如下所示。

  1. 1 alert(person1.constructor == Person); //true
  2. 2 alert(person2.constructor == Person); //true

对象实例 instanceof 对象

提到检测对象类型 instanceof 操作符更可靠,我们创建的所有对象既是object实例也是构造函数的实例。可以使用instanceof来验证

  1. 1 alert(person1 instanceof Object); //true
  2. 2 alert(person1 instanceof Person); //true
  3. 3 alert(person2 instanceof Object); //true
  4. 4 alert(person2 instanceof Person); //true

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。验证new操作符的实例对象和传统object创建方式的类型归属:

  1. var obj = {
  2.  
  3. name:'s',
  4. age:'s',
  5. sex:'男'
  6. }
  7. alert(obj instanceof Object); // true
  8. alert(obj instanceof Person); // false
  9.  
  10. //字面量方式创建的对象obj只属于object,并不属于其他对象,更没有办法让他具有特定类型。对比看来是不是构造函数的方式好的很多。

2、原型的方法:

  1.  function Person(){
  2.  }
  3.  Person.prototype.name = "Nicholas";
  4.  Person.prototype.age = 29;
  5.  Person.prototype.job = "Software Engineer";
  6.  Person.prototype.sayName = function(){
  7.   alert(this.name);
  8.  };
  9.  var person1 = new Person();
  10.  
  11.  var person2 = new Person();
  1. aisPrototypeOf 用来确定实例person1/2是否指向了构造函数Person.prototype(原型对象) (这个指针就是__proto__ [[Prototype]])-->隐士的存在
  1. Person.prototype.isPrototypeOf(person1) //true
  2. Person.prototype.isPrototypeOf(person2) //true

b、Object.getPrototypeOf() 返回 __proto__ 或 [[Prototype]] 的指向

  1. Object.getPrototypeOf(person1) // Person.prototype
  2. Object.getPrototypeOf(person1).name // Nicholas

c、person1.hasOwnProperty("name") 检测一个属性是存在于实例中,还是存在于原型中. 只在给定属性存在于对象实例中时,才会返回true

  1.  alert(person1.hasOwnProperty("name")); //false
  2.  person1.name = "Greg";
  3.  alert(person1.name); //"Greg"——来自实例
  4.  alert(person1.hasOwnProperty("name")); //true
  5.  
  6.  alert(person2.name); //"Nicholas"——来自原型
  7.  alert(person2.hasOwnProperty("name")); //false
  8.  
  9.  delete person1.name;
  10.  alert(person1.name); //"Nicholas"——来自原型
  11.  alert(person1.hasOwnProperty("name")); //false

注意:调用person1.hasOwnProperty( "name")时,只有当person1 重写name 属性后才会返回true,因为只有这时候name 才是一个实例属性,而非原型属性。

3、原型与in操作符

in:检测对象中是否有指定属性。in 操作符会在通过对象能够访问给定属性时返回 true,无论该属性存在于实例中还是原型中。

  1. function Person(){
  2. }
  3. Person.prototype.name = "Nicholas";
  4. Person.prototype.age = 29;
  5. Person.prototype.job = "Software Engineer";
  6. Person.prototype.sayName = function(){
  7. alert(this.name);
  8. };
  9. var person1 = new Person();
  10. var person2 = new Person();
  1. alert(person1.hasOwnProperty("name")); //false
  2. alert("name" in person1); //true
  3. person1.name = "Greg";
  4. alert(person1.name); //"Greg" ——来自实例
  5. alert(person1.hasOwnProperty("name")); //true
  6. alert("name" in person1); //true
  7. alert(person2.name); //"Nicholas" ——来自原型
  8. alert(person2.hasOwnProperty("name")); //false
  9. alert("name" in person2); //true
  10. delete person1.name;
  11. alert(person1.name); //"Nicholas" ——来自原型
  12. alert(person1.hasOwnProperty("name")); //false
  13. alert("name" in person1); //true

注意:以上name属性,有在原型上的,有在对象上的。所以 "name" in person1 始终都返回 true。

同时使用 hasOwnProperty()方法和 in 操作符,就可以确定该属性到底是存在于对象中,还是存在于原型中。如下所示:

  1. function hasPrototypeProperty(object, name) {
  2. return !object.hasOwnProperty(name) && (name in object)
  3. }
  4. //name in object 只要存在于实例中或者原型上就返回 true
  5. //如果object.hasOwnProperty(name)返回flase证明不存在于实例上,取反返回true。

注意:只要 in 操作符返回 true 而 hasOwnProperty()返回 false,就可以确定属性是原型中的属性。

下面看看自定义函数hasPrototypeProperty()的用法:

  1. var person = new Person();
  2. alert(hasPrototypeProperty(person, "name")); //true
  3. person.name = "Greg";
  4. alert(hasPrototypeProperty(person, "name")); //false

注意:

name 属性先是存在于原型中,因此 hasPrototypeProperty()返回 true。

当在实例中重写 name 属性后,该属性就存在于实例中了,因此 hasPrototypeProperty()返回 false。

4、Object.keys()方法

用来获得对象上可枚举的实例属性。接收一个对象作为参数,返回包含所有可枚举属性的字符串数组。

a、获得可枚举的属性

  1. function Person(){
  2. }
  3. Person.prototype.name = "Nicholas";
  4. Person.prototype.age = 29;
  5. Person.prototype.job = "Software Engineer";
  6. Person.prototype.sayName = function(){
  7. alert(this.name);
  8. };
  9. var keys = Object.keys(Person.prototype);
  10. alert(keys); //"name,age,job,sayName"
  11. var p1 = new Person();
  12. p1.name = "Rob";
  13. p1.age = 31;
  14. var p1keys = Object.keys(p1);
  15. alert(p1keys); //"name,age"

keys方法可以获得所有可枚举属性的集合,使用for..in..也可以循环得出可枚举的属性。

可枚举属性:通俗的讲,我们自定义在实例或者原型上的属性是可枚举属性。拿原型举例子,实例化构造函数的实例下指向的原型有一个constructor就是实例的不可枚举属性。因为(枚举) enumerablefalse。

不可枚举属性:就是enumerablefalse的属性,使用for..in../Object.keys()/JSON.stringfy()都无法获取到。那么如何可枚举和不可枚举属性都获取到,如下:

b、获得所有可枚举属性和不可枚举属性的集合

Object.getOwnPropertyNames()

  1. var keys = Object.getOwnPropertyNames(Person.prototype);
  2. alert(keys); //"constructor,name,age,job,sayName"

注意:结果中包含了不可枚举的 constructor 属性。Object.keys()和 Object.getOwnPropertyNames()方法都可以用来替代 for-in 循环。支持这两个方法的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 12+和 Chrome

注意结果中包含了不可枚举的 constructor 属性。Object.keys()和 Object.getOwnPropertyNames()方法都可以用来替代 for-in 循环。支持这两个方法的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 12+和 Chrome

JavaScript 面向对象编程(四)的常用方法、属性总结的更多相关文章

  1. JavaScript面向对象编程学习笔记

    1  Javascript 面向对象编程 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例 ...

  2. 深入理解Javascript面向对象编程

    深入理解Javascript面向对象编程 阅读目录 一:理解构造函数原型(prototype)机制 二:理解原型域链的概念 三:理解原型继承机制 四:理解使用类继承(继承的更好的方案) 五:建议使用封 ...

  3. 【转】Javascript 面向对象编程(一):封装

    原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript ...

  4. Javascript 面向对象编程(一):封装 by 阮一峰

    <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Java ...

  5. 转:javascript面向对象编程

    作者: 阮一峰 日期: 2010年5月17日 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学 ...

  6. 探讨javascript面向对象编程

    (个人blog迁移文章.) 前言: 下面将探讨javascript面向对象编程的知识. 请不要刻意把javascript想成面向对象编程是理所当然的. javascript里面,对象思想不可少,但是不 ...

  7. 《JavaScript面向对象编程指南(第2版)》读书笔记(一)

    目录 一.对象 1.1 获取属性值的方式 1.2 获取动态生成的属性的值 二.数组 2.1 检测是否为数组 2.2 增加数组长度导致未赋值的位置为undefined 2.3 用闭包实现简易迭代器 三. ...

  8. (三)Javascript面向对象编程:非构造函数的继承

    Javascript面向对象编程:非构造函数的继承   这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使 ...

  9. (二)Javascript面向对象编程:构造函数的继承

    Javascript面向对象编程:构造函数的继承   这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承 ...

  10. (一)Javascript 面向对象编程:封装

    Javascript 面向对象编程:封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP ...

随机推荐

  1. P2056 [ZJOI2007]捉迷藏

    传送门 如果没有修改显然就直接点分治 有修改那就动态点分治 动态点分治就是在点分树上维护一些东西,查询时也在点分树上查 因为点分树深度是$log$的所以可以保证时间复杂度 此题我们需要在点分树上维护 ...

  2. Gradle发布项目到 maven(1)

    常见的 Maven 仓库 JCenter.MavenCenter.JitPack epositories { google() // google 仓库 jcenter() // JCenter 仓库 ...

  3. Reading a IMU Without Kalman: The Complementary Filter

    目标是将惯性测量元件(IMU)之中陀螺仪.加速计的数据结合使用.Kalman filter太复杂,在微机上倾向用一种更简单的方法:Complementary filter 姿态估计(获得3个角度,俯仰 ...

  4. oracle 笔记---(六)__表空间

    查看表空间的大小 select tablespace_name,block_size,contents from dba_tablespaces; 查看表空间对应的数据文件 select file_n ...

  5. Http编程之HttpClient

    在Android开发中,Android SDK附带了Apache的HttpClient,它是一个完善的客户端.它提供了对HTTP协议的全面支持,可以使用HttpClient的对象来执行HTTP GET ...

  6. Apache Beam的架构概览

    不多说,直接上干货! Apache Beam是一个开源的数据处理编程库,由Google贡献给Apache的项目,前不久刚刚成为Apache TLP项目.它提供了一个高级的.统一的编程模型,允许我们通过 ...

  7. PHP流程控制之goto语句

    goto 操作符可以用来跳转到程序中的另一位置.该目标位置可以用目标名称加上冒号来标记,而跳转指令是 goto 之后接上目标位置的标记.PHP 中的 goto 有一定限制,目标位置只能位于同一个文件和 ...

  8. 阅读redis源代码的一些体会

    最近在学习redis及阅读redis等程序的源码时,有一些收获,特记录到下面. 1.第一步,阅读源代码借助最好可以跟踪的工具去读,如sourceinsight. 我使用的是windows7环境,又因为 ...

  9. js 中移动元素的方法

    2017-12-13 19:59:24 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  10. Python sh模块--------替换subprocess的利器

    官方文档有句话"allows you to call any program",并且: helps you write shell scripts in Python by giv ...