深入理解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 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 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中图片等比缩放的实例
2013/03/24 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python实现动态数组的示例代码
2019/07/15 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
2014年创卫实施方案
2014/02/18 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
承诺函范文
2015/01/21 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书