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三（对象思想）

最新文章

热门文章