深入理解JavaScript中的对象


Posted in Javascript onJune 04, 2015

 JavaScript是一种面向对象编程(OOP)语言。一种编程语言可以被称为面向对象的,它为开发者提供了四种基本功能:

  •     封装 - 存储相关的信息,无论是数据或方法,还是对象
  •     聚合 -  存储一个对象到另一个对象的内部
  •     继承 - 类的能力依赖于另一个类(或类数),用于其部分的属性和方法
  •     多态性 - 编写函数或者方法,在各种不同的方式工作

对象是由属性。如果属性包含一个函数,它被认为是一个对象的方法,否则,该属性被认为是一个属性。
对象属性:

对象的属性可以是任何三种基本数据类型的,或者任何抽象数据类型,如另一个对象。对象属性通常是内部使用的对象的方法的变量,但也可以是用于整个页面全局可见的变量。

用于添加属性的目的语法是:

objectName.objectProperty = propertyValue;

示例 :

下面是一个简单的例子来说明如何利用“称号”的文件对象的属性来获取文档标题:

var str = document.title;

对象的方法:

方法是让对象做某件事。一个函数和一个方法,所不同的是一个 function语句的一个独立的单元和方法被附加到对象,并可以通过这个关键字被引用之间的差别不大。

方法可用于一切从显示对象的屏幕上的内容,以对一组本地的属性和参数执行复杂的数学运算是有用的。
例子:

下面是一个简单的例子来说明如何使用write()文档对象的方法写在文档中的任何内容:

document.write("This is test");

用户定义的对象:

所有用户定义的对象和内置对象被称为对象的对象的后代。
new 操作符:

new运算符用于创建对象的实例。要创建一个对象,new运算符后面是构造方法。

在下面的例子中,构造方法Object(), Array(), 和 Date().。这些构造函数是内置的 JavaScript 函数。

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

Object() 构造函数:

构造函数是用来创建和初始化对象的函数。 JavaScript提供了一个特殊的构造函数调用Object()来构建的对象。Object()构造的返回值被分配给一个变量。

变量包含一个引用到新的对象。分配给该对象的属性是不变量,并且不使用var关键字来定义。
示例 1:

这个例子演示了如何创建一个对象:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object();  // Create the object
  book.subject = "Perl"; // Assign properties to the object
  book.author = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
  document.write("Book name is : " + book.subject + "<br>");
  document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>

 
示例 2:

这个例子演示如何创建一个对象,一个用户定义的函数。此处this关键字用于指已传递给函数的对象:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
  this.title = title; 
  this.author = author;
}
</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>

 
定义方法的对象:

前面的示例演示了如何构造函数创建对象并分配属性。但是,我们需要通过分配方法,以它来完成一个对象的定义。
例子:

下面是一个简单的例子来说明如何与一个对象添加一个函数:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
  this.price = amount; 
}

function book(title, author){
  this.title = title; 
  this.author = author;
  this.addPrice = addPrice; // Assign that method as property.
}

</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  myBook.addPrice(100);
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
  document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

 
with 关键字:

with关键字作为一种速记的引用对象的属性或方法。

指定为参数的对象就成为接下来的块的持续时间的默认对象。为对象的属性和方法可以在不命名的对象。
语法

with (object){
  properties used without the object name and dot
}

例子:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
  with(this){
    price = amount; 
  }
}
function book(title, author){
  this.title = title; 
  this.author = author;
  this.price = 0;
  this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  myBook.addPrice(100);
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
  document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>
Javascript 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Vue实现todo应用的示例
Feb 20 Vue.js
详解JavaScript中void语句的使用
Jun 04 #Javascript
用JavaScript实现对话框的教程
Jun 04 #Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 #Javascript
javascript原型模式用法实例详解
Jun 04 #Javascript
使用JavaScript刷新网页的方法
Jun 04 #Javascript
JavaScript中Cookies的相关使用教程
Jun 04 #Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
PHP代码优化的53个细节
2014/03/03 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
化学实验员岗位职责
2013/12/28 职场文书
社区母亲节活动记录
2014/03/06 职场文书
调解协议书
2014/04/16 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
尼克胡哲观后感
2015/06/08 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android