JavaScript三（对象思想）

JavaScript并不是面向对象的程序设计语言，但它是基于对象的。JavaScript中的每个函数都可用于创建对象，返回的对象既是该对象的实例，也是object的实例。

一.对象与关联数组

JavaScript中的对象本质上是一个关联数组，就像Java里的Map数据结构，有一组key-value对组成，不同的是JavaScript对象的value不仅可以是值，也可以是函数，该函数就是该对象的方法。

当value是基本类型的值或者复合类型的值的时候，此时value就是该对象的属性值。

因此访问某个JavaScript对象时，不仅可以使用obj.propName的形式，也可以采用obj[propName]的形式，有时候必须使用这种形式。

<script type="text/javascript">
    function Person(name,age)
    {
      this.name = name;
      this.age = age;
      this.info = function(){
        alert("info方法");
      }
    }

    var p = new Person('Sherman',30);
    for(propName in p)
    {
      document.writeln("p对象的"+propName+"属性的属性值是"+p[propName]+'<br/>')
    }
  </script>

二.继承和prototype

JavaScript没有提供显示的继承语法，每个对象都是object的子类，因而各对象之间平等，各对象之间不存在直接的父子关系。

JavaScript提供了一些内建类，，通过这些内建类可以方便的创建各自对象。

JavaScript是一种动态语言，允许自由地为对象增加属性和方法，当程序为对象不存在的属性赋值时，即可认为为该对象增加属性，例如

var p = {}
p.age=30;
p.info = function(){
alert('info方法');
}

JavaScript的所有类都有一个protoType属性，如果为JavaScript类的protoType的属性增加属性，方法，则可视为对原有类的拓展。我们可以理解为：增加了protoType属性的类继承了原有的类，

这是JavaScript的伪继承机制。看下面代码：

<script type="text/javascript">
    function Person(name,age)
    {
      this.name = name;
      this.age = age;
      this.info = function(){
        document.writeln('姓名:'+this.name+'<br/>');
        document.writeln('年龄:'+this.age+'<br/>');
      }
    }
    var p1 = new Person('Sherman',23);
    p1.info();

    Person.prototype.walk = function()
    {
     document.writeln(this.name+'慢慢的溜达...<br/>')
    }
    document.writeln('<hr/>');
    var p2 = new Person('Leegang',30);
    p2.walk();
    p1.walk();
  </script>

注意的是，伪继承的本质是修改了原有的类，并不是产生新的子类

通过使用protoType属性可以为JavaScript内建类进行拓展

<script type="text/javascript">
    Array.prototype.indexof = function(obj)
    {
      var result = -1;
      for(var i = 1;i < this.length;i++)
      {
        if(this[i] == obj){
          result = 1;
          break;
        }
      }
      return result;
    }

    var arr = [4,5,7,-2];
    alert(arr.indexof(-2));
  </script>

此外，protoType代表了该类的原型对象，在默认情况下，JavaScript类的protoType属性值是一个对象，将JavaScript类的protoType设为父类实例，可实现JavaScript的继承，例如：

<script type="text/javascript">
    function Person(name,age)
    {
      this.name = name;
      this.age = age;
    }
    Person.prototype.sayHello = function()
    {
      console.log(this.name+'向您打招呼');
    }

    var per = new Person('牛魔王',30000);
    per.sayHello();

    function Student(grade)
    {
      this.grade = grade;
    }

    Student.prototype = new Person('未命名',0);
    Student.prototype.intro = function()
    {
      console.log("%s是个学生，读%d年级",this.name,this.grade);

    }

    var stu = new Student(5);
    stu.name = '孙悟空';

    console.log(stu instanceof Student);//输出true
    console.log(stu instanceof Person);//输出true
    stu.sayHello();
    stu.intro();
  </script>

三.构造器实现伪继承

实现代码如下：

<script type="text/javascript">
  function Person(name,age)
  {
    this.name = name;
    this.age = age;
    this.sayHello = function()
    {
      console.log(this.name+'向您打招呼!');
    }
  }

  var per = new Person('牛魔王',30000);
  per.sayHello();

  function Student(name,age,grade)
  {
    this.a = Person;
    this.a(name,age);
    this.grade = grade;
  }

  Student.prototype.intro = function()
  {
    console.log("%s是个学生，读%d年级",this.name,this.grade);
  }

  var stu = new Student('孙悟空',34,5);
  console.log(stu instanceof Student);//输出true
  console.log(stu instanceof Person);//输出true
  stu.sayHello();
  stu.intro();
</script>

四.使用apply或call实现伪继承

实现代码如下：

<script type="text/javascript">
    function Person(name,age)
    {
      this.name = name;
      this.age = age;
      this.sayHello = function()
      {
        console.log(this.name+'向您打招呼!');
      }
    }

    var per = new Person('牛魔王',30000);
    per.sayHello();

    function Student(name,age,grade)
    {
      //this.a = Person;
     // this.a(name,age);
      Person.call(this,name,age);
      Person.apply(this,[name,age]);
      this.grade = grade;
    }

    Student.prototype.intro = function()
    {
      console.log("%s是个学生，读%d年级",this.name,this.grade);
    }

    var stu = new Student('孙悟空',34,5);
    console.log(stu instanceof Student);//输出true
    console.log(stu instanceof Person);//输出true
    stu.sayHello();
    stu.intro();
  </script>

输出结果同上

五.创建对象

JavaScript创建对象大致有3种方式：

1.使用new关键字调用构造器创建对象

2.使用object类创建对象

//创建一个默认的对象
var obj = new Object();

这是空对象，没有任何属性和方法，但是JavaScript是动态语言，可以动态的为对象增加属性和方法

如下代码：

<script type="text/javascript">
    var myobj = new Object();
    myobj.name = 'Sherman';
    myobj.age = 34;
    document.writeln(myobj.name+myobj.age);//输出Sherman34
  </script>

3.使用Json语法创建对象

使用Json语法创建JavaScript对象时，属性值不仅可以是普通字符串，也可以是任何基本数据类型，还可以是数组，函数，甚至是另外一个JSON语法创建的对象。

Person = 
      {
        name:'Sherman',
        gender:'male',
        son:{
          name:'guoguo',
          grade:1
        },
        info:function()
        {
          document.writeln('姓名：'+this.name+'性别：'+this.gender);
        }
      }
  </script>

也可以使用JSON语法创建数组

arr = [vlue1,value2,value3,...]

如下代码，创建了一个复杂的JSON对象

 Person =
      {
        name:'Sherman',
        age:29,
        schools:['小学','中学','大学'],
        parents:[{
          name:'father',
          age:49,
          address:'广州'
        },{
          name:'mother',
          age:51,
          address:'深圳'
        }]
      }

JavaScript三（对象思想）

猜你喜欢