js对象笔记

最新推荐文章于 2022-07-25 23:20:57 发布

呵呵后

最新推荐文章于 2022-07-25 23:20:57 发布

阅读量1k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/oHeHeHou/article/details/8799060

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

对象基本概念

js支持以下几种对象:

1.用户自定义对象

2.核心或内置对象(Date,String,Number等)

3.浏览器对象(BOM)

4.文档对象(DOM)

对象的方法：

把一个函数名赋给属性，则这个属性将作为对象的一个方法使用。

  <script type="text/javascript">
    var toy = new Object();
    toy.color = "red";
    toy.display = printObject();
    function printObject() {
        alert(toy.color);
    }
    toy.display();
  </script>

结果：red

创建“类”及其对象：

js不像Java或C++中有类的机制，而是通过函数来定义。

  <script type="text/javascript">

    function Book() {
        this.name="abc";
    }
    var bookObj = new Book;
    alert(bookObj.name);

  </script>

结果：abc

Book()函数定义了一个类，通过new调用该函数时，它就成为了构造函数，返回的是该类的对象。

注：可以动态地为js中的对象添加属性：

    <script type="text/javascript">
    function Book() {
        this.name="abc";
    }
    var bookObj = new Book;
    bookObj.date = "1990"
    alert(bookObj.date);
  </script>

结果:1990

内联函数作为对象的方法：

内联函数在构造函数中直接赋值给属性，免去了第一个例子中先定义再赋值的麻烦。

  <script type="text/javascript">

    function Book() {
        this.name="abc";
        this.msg = function() {alert(this.name);}
    }
    var bookObj = new Book;
    bookObj.msg();

  </script>

结果：abc

对象字面量(Object literal)

通过对象字面量，可以不通过调用构造函数的方式创建对象。

对象字面量使用key/value的方式来表示对象属性，并且可以嵌套。

语法如下：

1.使用冒号分隔键值

2.使用逗号分隔每组键/值

3.最后一组键值省略逗号

4.整个对象封装在一对括号中

普通对象字面量：

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
        
    var soldier = {
      name: undefined,
      rank: "captain",
      fallIn: function() {
         alert("fallIn");
      },
      fallOut: function() {
         alert("fallOut");
      } 
    };
  </script>
  </head>
  <body>
  <script type="text/javascript">
     soldier.name = "Tom";
     alert(soldier.name);
     soldier.fallIn();
     soldier.fallOut();
  </script>
  </body>
</html>

运行结果:分别弹出Tom,fallIn，fallOut的对话框

嵌套对象字面量：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
        
    var soldier = {
      name: undefined,
      rank: "captain",
      region:{
          name: "nanjing",
          phone: 025,
          address: {
              state: "jiangsu"
          }
      },
      fallIn: function() {
         alert("fallIn");
      },
      fallOut: function() {
         alert("fallOut");
      } 
    };
  </script>
  </head>
  <body>
  <script type="text/javascript">
     alert("city:"+soldier.region.name + "---province:" + soldier.region.address.state);
  </script>
  </body>
</html>

运行结果：
city:nanjing---province:jiangsu

对象原型（prototype）

当给构造函数的prototype属性赋值时，它们会自动扩展到该类的所有实例。

用prototype属性为对象添加属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    function Book(title, author) {
      this.title = title;
      this.author = author;
    }
    
  </script>
  </head>
  <body>
  <script type="text/javascript">
     var book1 = new Book("book1", "author1");
     var book2 = new Book("book2", "author2");
     Book.prototype.publisher = "Jack";
     document.write(book1.title+" is published by "+book1.publisher+"<br/>");
     document.write(book2.title+" is published by "+book2.publisher);
  </script>
  </body>
</html>

结果：

页面输出

book1 is published by Jack
book2 is published by Jack

注：添加新属性的方法同样适用于添加新方法。

原型查找链：js中获取对象的属性时，会先查看该属性是否直接定义在那个对象中，如果没有找到，则从prototype属性中寻找，如果还是没有，则向上查找父类对象，一直查到最顶层（Object），这样的过程叫做原型查找链。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    function Book(title, author) {
      this.title = title;
      this.author = author;
    }
    
  </script>
  </head>
  <body>
  <script type="text/javascript">
     var book1 = new Book("book1", "author1");
     var book2 = new Book("book2", "author2");
     Object.prototype.category = "Science";
     Book.prototype.publisher = "Jack";
     document.write(book1.title+" is published by "+book1.publisher + " and in the " + book1.category +"<br/>");
     document.write(book2.title+" is published by "+book2.publisher + " and in the " + book1.category);
  </script>
  </body>
</html>

输出结果：

book1 is published by Jack and in the Science
book2 is published by Jack and in the Science

这个例子中向上查找的过程：Book中查找publisher->无->Book.prototype查找publisher->有->Book中查找category->无->Book.prototype查找category->无->Object->无->Object.prototype->找到

如果到Object.prototype仍未找到的话，则返回undefined

通过原型实现继承：

js中没有extends关键字，所以实现继承用的是原型的方式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  
    <script type="text/javascript">
    function A() {
      this.name="abc";
      this.getName = function() {
          return this.name;
      };
    }
 
    function B() {}
    //此处实现了B对A的继承
    B.prototype = new A();
    //B的构造函数赋值
    B.prototype.constructor = B;
    //子类添加方法
    B.prototype.speak = function () {
        alert("B is speaking");
    }
    
  </script>
  </head>
  <body>
    <script type="text/javascript">
      var Bobj = new B;
      Bobj.speak(); 
      alert(Bobj.getName()); 
    </script>
  </body>
</html>

结果：先弹出B is speaking再弹出abc

呵呵后

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js对象笔记

对象基本概念js支持以下几种对象:1.用户自定义对象2.核心或内置对象(Date,String,Number等)3.浏览器对象(BOM)4.文档对象(DOM)对象的方法：把一个函数名赋给属性，则这个属性将作为对象的一个方法使用。 var toy = new Object(); toy.color = "red"; toy.di
复制链接

扫一扫