ITPub博客

首页 > IT职业 > IT生活 > JavaScript三(对象思想)

JavaScript三(对象思想)

IT生活 作者:llittle 时间:2021-09-09 09:15:04 0 删除 编辑

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

一.对象与关联数组

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

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

                                                                                                                                                                                                                                                      

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

 

图片描述

图片描述

 

图片描述

 

二.继承和prototype

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

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

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

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

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

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

图片描述

图片描述

图片描述

 

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

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

图片描述

图片描述

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

图片描述

图片描述

图片描述

三.构造器实现伪继承

实现代码如下:

图片描述

图片描述

图片描述

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

实现代码如下:

图片描述

图片描述

输出结果同上

五.创建对象

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

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

2.使用object类创建对象

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

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

如下代码:

 

3.使用Json语法创建对象

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

图片描述

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

图片描述

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

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

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

图片描述

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

图片描述

原文出处

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/813/viewspace-2801227/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-12

  • 博文量
    448
  • 访问量
    4369