深入理解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 相关文章推荐
javascript 闭包
Sep 15 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
JS 数字转换研究总结
Dec 26 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
使用webpack搭建react开发环境的方法
May 15 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
Session保存到数据库的php类分享
2011/10/24 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
js new Date()实例测试
2019/10/31 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Python Collatz序列实现过程解析
2019/10/12 Python
python实现计算器功能
2019/10/31 Python
Python如何对XML 解析
2020/06/28 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
我为自己代言广告词
2014/03/18 职场文书
紫日观后感
2015/06/05 职场文书
青涩记忆观后感
2015/06/18 职场文书
高中地理教学反思
2016/02/19 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Android中View.post和Handler.post的关系
2022/06/05 Java/Android