深入理解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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
js常用排序实现代码
Dec 28 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
webpack 最佳配置指北(推荐)
Jan 07 Javascript
react基本安装与测试示例
Apr 27 Javascript
详解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+javascript实现二级级联菜单的制作
2008/05/06 PHP
PHP 图片上传代码
2011/09/13 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python 读取.nii格式图像实例
2020/07/01 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
机关门卫岗位职责
2013/12/30 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
活动简报范文
2015/07/22 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书