JavaScript 面向对象编程(四)的常用方法、属性总结
面向对象的属性、方法、操作符总结,都是干货。想深入掌握面向对象的程序设计模式,必须掌握一下知识点。下列知识点注重于实现,原理还请借鉴《javascript高级程序设计》 (基于javascript高级程序设计,总结出来的实用,常用方法属性和操作符)
1、标识构造函数对象实例的类型(构造函数的属性和操作符)
对象实例.constructor == 构造函数对象
在前面例子的最后,person1 和 person2 分别保存着 Person 的一个不同的实例。这两个对象都有一个 constructor(构造函数)属性,该属性指向 Person,如下所示。
1 alert(person1.constructor == Person); //true
2 alert(person2.constructor == Person); //true
对象实例 instanceof 对象
提到检测对象类型 instanceof 操作符更可靠,我们创建的所有对象既是object实例也是构造函数的实例。可以使用instanceof来验证
1 alert(person1 instanceof Object); //true
2 alert(person1 instanceof Person); //true
3 alert(person2 instanceof Object); //true
4 alert(person2 instanceof Person); //true
创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。验证new操作符的实例对象和传统object创建方式的类型归属:
var obj = {
name:'s',
age:'s',
sex:'男'
}
alert(obj instanceof Object); // true
alert(obj instanceof Person); // false
//字面量方式创建的对象obj只属于object,并不属于其他对象,更没有办法让他具有特定类型。对比看来是不是构造函数的方式好的很多。
2、原型的方法:
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
a、isPrototypeOf 用来确定实例person1/2是否指向了构造函数Person.prototype(原型对象) (这个指针就是__proto__ 或 [[Prototype]])-->隐士的存在
Person.prototype.isPrototypeOf(person1) //true
Person.prototype.isPrototypeOf(person2) //true
b、Object.getPrototypeOf() 返回 __proto__ 或 [[Prototype]] 的指向
Object.getPrototypeOf(person1) // Person.prototype
Object.getPrototypeOf(person1).name // Nicholas
c、person1.hasOwnProperty("name") 检测一个属性是存在于实例中,还是存在于原型中. 只在给定属性存在于对象实例中时,才会返回true
alert(person1.hasOwnProperty("name")); //false
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person1.hasOwnProperty("name")); //true
alert(person2.name); //"Nicholas"——来自原型
alert(person2.hasOwnProperty("name")); //false
delete person1.name;
alert(person1.name); //"Nicholas"——来自原型
alert(person1.hasOwnProperty("name")); //false
注意:调用person1.hasOwnProperty( "name")时,只有当person1 重写name 属性后才会返回true,因为只有这时候name 才是一个实例属性,而非原型属性。
3、原型与in操作符
in:检测对象中是否有指定属性。in 操作符会在通过对象能够访问给定属性时返回 true,无论该属性存在于实例中还是原型中。
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" ——来自实例
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" ——来自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" ——来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
注意:以上name属性,有在原型上的,有在对象上的。所以 "name" in person1 始终都返回 true。
同时使用 hasOwnProperty()方法和 in 操作符,就可以确定该属性到底是存在于对象中,还是存在于原型中。如下所示:
function hasPrototypeProperty(object, name) {
return !object.hasOwnProperty(name) && (name in object)
}
//name in object 只要存在于实例中或者原型上就返回 true
//如果object.hasOwnProperty(name)返回flase证明不存在于实例上,取反返回true。
注意:只要 in 操作符返回 true 而 hasOwnProperty()返回 false,就可以确定属性是原型中的属性。
下面看看自定义函数hasPrototypeProperty()的用法:
var person = new Person();
alert(hasPrototypeProperty(person, "name")); //true
person.name = "Greg";
alert(hasPrototypeProperty(person, "name")); //false
注意:
name 属性先是存在于原型中,因此 hasPrototypeProperty()返回 true。
当在实例中重写 name 属性后,该属性就存在于实例中了,因此 hasPrototypeProperty()返回 false。
4、Object.keys()方法
用来获得对象上可枚举的实例属性。接收一个对象作为参数,返回包含所有可枚举属性的字符串数组。
a、获得可枚举的属性
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName"
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys); //"name,age"
keys方法可以获得所有可枚举属性的集合,使用for..in..也可以循环得出可枚举的属性。
可枚举属性:通俗的讲,我们自定义在实例或者原型上的属性是可枚举属性。拿原型举例子,实例化构造函数的实例下指向的原型有一个constructor就是实例的不可枚举属性。因为(枚举) enumerable为false。
不可枚举属性:就是enumerable为false的属性,使用for..in../Object.keys()/JSON.stringfy()都无法获取到。那么如何可枚举和不可枚举属性都获取到,如下:
b、获得所有可枚举属性和不可枚举属性的集合
Object.getOwnPropertyNames()
var keys = Object.getOwnPropertyNames(Person.prototype);
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 面向对象编程(四)的常用方法、属性总结的更多相关文章
- JavaScript面向对象编程学习笔记
1 Javascript 面向对象编程 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例 ...
- 深入理解Javascript面向对象编程
深入理解Javascript面向对象编程 阅读目录 一:理解构造函数原型(prototype)机制 二:理解原型域链的概念 三:理解原型继承机制 四:理解使用类继承(继承的更好的方案) 五:建议使用封 ...
- 【转】Javascript 面向对象编程(一):封装
原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript ...
- Javascript 面向对象编程(一):封装 by 阮一峰
<Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Java ...
- 转:javascript面向对象编程
作者: 阮一峰 日期: 2010年5月17日 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学 ...
- 探讨javascript面向对象编程
(个人blog迁移文章.) 前言: 下面将探讨javascript面向对象编程的知识. 请不要刻意把javascript想成面向对象编程是理所当然的. javascript里面,对象思想不可少,但是不 ...
- 《JavaScript面向对象编程指南(第2版)》读书笔记(一)
目录 一.对象 1.1 获取属性值的方式 1.2 获取动态生成的属性的值 二.数组 2.1 检测是否为数组 2.2 增加数组长度导致未赋值的位置为undefined 2.3 用闭包实现简易迭代器 三. ...
- (三)Javascript面向对象编程:非构造函数的继承
Javascript面向对象编程:非构造函数的继承 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使 ...
- (二)Javascript面向对象编程:构造函数的继承
Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承 ...
- (一)Javascript 面向对象编程:封装
Javascript 面向对象编程:封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP ...
随机推荐
- UML类图关系(继承、泛化、实现、依赖、关联、聚合、组合)
继承.实现.依赖.关联.聚合.组合的联系与区别 分别介绍这几种关系: 继承 指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父接口)的功能,并可以增加它自己的新功能的能力,继承是类与类或者 ...
- 通过Qt从URL下载文件
示例1: 通过Qt自带的例子学习,位置:[安装盘符]:\Qt\Qt5.1.1\5.1.1\Src\qtbase\examples\network\download 示例2: 通过Qt的文档,位置: ...
- JS及Dom练习 | 模态对话框及复选框操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (转)在 Windows 上调优 DB2 数据库的八个简单步骤
原文:https://www.ibm.com/developerworks/cn/data/library/techarticle/dm-1209tunedb2/index.html 概述 为了更好地 ...
- (转)linux shell单引号、双引号及无引号区别
原文:http://blog.csdn.net/woshizhangliang999/article/details/50132265 3.描述linux shell中单引号.双引号及不加引号的简单区 ...
- 发送请求时params和data的区别
在使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,实则不然. 因为params是添加到url的请求字符串中的,用于get请求. 而data是添加到请求体(body) ...
- Linux 上安装 weblogic12C (静默安装) (一)
最近负责在linux上安装weblogic,客户说要安装最新的版本,版本号为 12.1.X(12.1.2,12.1.3).开始以为和旧版安装一样,使用控制台的方式,下载bin文件,然后一步步在cons ...
- TOJ 3184 Mine sweeping
描述 I think most of you are using system named of xp or vista or win7.And these system is consist of ...
- [转]python中对文件、文件夹的操作——os模块和shutil模块常用说明
转至:http://l90z11.blog.163.com/blog/static/187389042201312153318389/ python中对文件.文件夹的操作需要涉及到os模块和shuti ...
- SpringBoot | 第三十四章:CXF构建WebService服务
前言 上一章节,讲解了如何使用Spring-WS构建WebService服务.其实,创建WebService的方式有很多的,今天来看看如何使用apache cxf来构建及调用WebService服务. ...