深入理解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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
vue-router为激活的路由设置样式操作
Jul 18 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
php命令行模式代码实例详解
2021/02/26 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
python切片及sys.argv[]用法详解
2018/05/25 Python
Python对象与引用的介绍
2019/01/24 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python如何调用字典的key
2020/05/25 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
书法大赛策划方案
2014/06/04 职场文书
市场营销专业自荐书
2014/06/10 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2014年信访工作总结
2014/11/17 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
MySQL 5.7常见数据类型
2021/07/15 MySQL
分享python函数常见关键字
2022/04/26 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android