深入理解JavaScript中的对象

 更新时间:2015年06月04日 11:34:09   投稿:goldensun  
这篇文章主要介绍了深入理解JavaScript中的对象,是JS入门学习中的基础知识,需要的朋友可以参考下

 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>

相关文章

  • ParseInt函数参数设置介绍

    ParseInt函数参数设置介绍

    经常用ParseInt函数转换字符串为int数值,ParseInt函数有两个参数可以设置,其中第二个参数可以缺省
    2014-01-01
  • 判断页面是关闭还是刷新的js代码

    判断页面是关闭还是刷新的js代码

    判断页面是关闭还是刷新的js代码...
    2007-01-01
  • JavaScript之编码规范 推荐

    JavaScript之编码规范 推荐

    JavaScript是一种语法灵活,简单易懂的脚本语言。正因为灵活,因此很多人在编写代码时,显得很随意,这就导致后期的修改、扩展和维护变得异常困难。遵循统一的编码规范,不仅对C++和Java这种编译型语言很重要,对JavaScript脚本语言也同样如此
    2012-05-05
  • ECMAscript 变量作用域总结概括

    ECMAscript 变量作用域总结概括

    这篇文章主要介绍了ECMAscript 变量作用域,通过使用var操作符声明和未使用var操作符声明两种情景做出了解释,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • javascript中字符串的定义示例代码

    javascript中字符串的定义示例代码

    javascript中字符串如何定义,下面有个不错的示例,大家可以学习下
    2013-12-12
  • javascript实现滑动解锁功能

    javascript实现滑动解锁功能

    这篇文章主要介绍了javascript实现滑动解锁功能的方法及示例,效果非常棒,需要的朋友可以参考下
    2014-12-12
  • JavaScript核心语法总结(推荐)

    JavaScript核心语法总结(推荐)

    下面小编就为大家带来一篇JavaScript核心语法总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js资料prototype 属性

    js资料prototype 属性

    js资料prototype 属性...
    2007-03-03
  • javascript 学习笔记(八)javascript对象

    javascript 学习笔记(八)javascript对象

    昨天看了些有关javascript对象方面的文章,以下是自己的一些学习心得及体会,希望同大家共同讨论!
    2011-04-04
  • JavaScript 详解缓动动画的封装与使用

    JavaScript 详解缓动动画的封装与使用

    缓动动画原理:移动的像素慢慢减少,让效果看起来更柔和更美观,通过定时器加回调函数,实现动画效果以及更多具体功能,非常好用
    2021-11-11

最新评论