深入理解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常见注意事项
Jan 01 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
了解javascript中的Dom操作
May 27 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
js实现小球在页面规定的区域运动
Jun 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP 模板高级篇总结
2006/12/21 PHP
Zend 输出产生XML解析错误
2009/03/03 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP的几个常用加密函数
2016/02/03 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
《威尼斯的小艇》教学反思
2014/02/17 职场文书
创先争优个人总结
2015/03/04 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2016年少先队活动总结
2016/04/06 职场文书
手写实现JS中的new
2021/11/07 Javascript