文档章节

第八章——对象

湖心亭看雪
 湖心亭看雪
发布于 2014/10/29 22:29
字数 1581
阅读 96
收藏 8

    因为JavaScript是一种基于原型的语言,所有JavaScript中对象的工作方式,与其他基于类的语言中的对象不同。JavaScript对象基本上是属性和值的集合,这在编程中称为哈希表(hash table)。其中的值可以是任意类型的数据,包括函数、数组和其他对象。可以使用对象从一处向另一处传递多个值(当使用JSON在JavaScript和另一门语言之间传递数据时,这是非常容易的,后面章节将对此进行讨论)

一.创建单一对象(单一对象用于特定目的,例如创建名值对,或创建不与其他对象共享代码的唯一对象)的方法:

①对象构造函数

var car=new Object();
car.seats="cloth";
car.engine="V-6";
car.show_features=function(){
    window.alert("car:"+car.seats+"seats,"+car.engine+"engine");
    };
car.show_features();

或者(先创造函数,然后将此函数赋值给对象的函数)

var car=new Object();
car.seats="cloth";
car.engine="V-6";
function my_alert(){
    window.alert("car:"+car.seats+"seats,"+car.engine+"engine");
    };
car.show_features=my_alert;
car.show_features();

 ②对象字面量表示法

var car={
    seats:"cloth",
    engine:"V-6", 
    show_features:function(){
        window.alert("car:"+car.seats+"seats,"+car.engine+"engine");
        }
}

二.访问属性值:

①圆点表示法:window.alert(car.seats);

②括号表示法:window.alert(car["seats"]);

当需要使用属性名但它被存储在变量中时,括号表示法的这个特性会非常有用。因为圆点表示法只允许使用基本的属性名称,不能使用变量值。

三.对象结构:当以特定的方式编写对象时,可以创建一个对象,将它作为其他对象的结构或者模型。

①构造函数,构造函数可以为对象创建可重用代码(注意函数名以大写字母(C)开头,这非必须,但有助于与其他类型的函数区分开来)

function Car(seats,engine,radio){

    this.seats=seats;

    this.engine=engine;

    this.radio=radio;

    this.describe=function(){

        document.write("This amazing car has these features:");

        document.write(this.seats+"seats,"+this.engine+"engine,"+this.radio);

    };

}

var car1=new Car("cloth","v-6","Tape Deck");

car1.describe();

在构造函数中添加方法这种方式非常直接,但对于对象的每个实例都会创建一个相同任务的函数方法,将会耗费时间和空间。看下面的方法:

function Car(seats,engine,radio){

    this.seats=seats;

    this.engine=engine;

    this.radio=radio;

    this.describe=describe_car();

}

function describe_car(){

        document.write("This amazing car has these features:");

        document.write(this.seats+"seats,"+this.engine+"engine,"+this.radio);

}

不过,这种方法也有不利之处:现在该方法函数是全局,这样大量应该在Car结构的局部上下文之内的函数都出现在全局上下文中,从而使全局上下文变得混乱。为了解决这个问题,下面将学习使用原型。

四.使用原型:JavaScript中的每个函数都有prototype(原型)属性,该属性是一个对象,其中包含用该函数创建的每个对象实例都可以使用的属性和方法。对于共享的属性和方法,这种方式将使代码很容易就可以跨实例重用。

function Car(seats,engine,radio){

    this.seats=seats;

    this.engine=engine;

    this.radio=radio;

}

Car.prototype.locks="automatic";

var car1=new Car("cloths","V-6","Type Deck");

window.alert(car1.locks);//automatic

原理:在JavaScript中,调用对象的属性或方法将首先检查尝试使用它的对象。如果无法找到相应的属性或方法,并不会立刻放弃。相反,JavaScript将搜索对象原型来检查是否有匹配的值。实际上可向实例中添加与原型中的属性同名的属性,这将有效的隐藏该对象原型中的同名属性的值。

function Car(seats,engine,radio){

    this.seats=seats;

    this.engine=engine;

    this.radio=radio;

}

Car.prototype.locks="automatic";

var car1=new Car("cloths","V-6","Type Deck");

car1.locks="manual";

window.alert(car1.locks);//manual

五.hasOwnProperty()方法:

有时要确认在对象实例(不是原型)中是否存在某个属性。如果存在,该方法返回true,否则false;

function Car(seats,engine,radio){

    this.seats=seats;

    this.engine=engine;

    this.radio=radio;

}

Car.prototype.locks="automatic";

var car1=new Car("cloths","V-6","Type Deck");

var ca2=new Car("cloth","V-4","CD Changer");

car1.locks="manual";

window.alert(car1.locks);//manual

window.alert(car1.locks);//automatic

window.alert(car1.hasOwnProperty("locks");//true

window.alert(car2.hasOwnProperty("locks");//false

六.为方法使用原型:因为原型在对象的构造函数之外,并不在全局上下文中,因此它是添加方法函数的最佳位置,这些方法函数将在对象的每个实例之间共享。将对象每个实例的属性添加到构造函数中(如果它们具有唯一值),并将方法添加到原型中,以便在所有实例中共享。基于上面的原因,生成自定义对象有一种通用模式,被称为构造函数/原型结合模式。

function Car(seats,engine,radio){

    this.seats=seats;

    this.engine=engine;

    this.radio=radio;

}

Car.prototype.describe=function(){

    document.write("This amazing car has these features:");

    document.write(this.seats+"seats,"+this.engine+"engine,"+this.radio);

}

var car1=new Car("cloth","V-6","Tape Deck");

car1.describe();

七.for-in:JavaScript允许使用for-in循环遍历对象的属性,以及使用with语句来轻松访问特定的对象。

for( var prop_name in car1){

    document.write(prop_name+":"+car1[prop_name]+"<br>");

}

注意,该循环将显示所有的属性,包括对象原型中的属性。如果只希望使用对象实例中的属性,可以使用hasOwnProperty()方法来检查每个属性

for( var prop_name in car1){

    if(car1.hasOwnProperty(prop_name)){

         document.write(prop_name+":"+car1[prop_name]+"<br>");

    }

}

②with语句:在with语句中可以直接使用对象的属性名来访问属性值。(通常不鼓励使用with,因为它存在性能问题,并且在使用它时,容易不小心对全局变量进行赋值或改写)

with(car1){

document.write("Seats:"+seats+"<br>");

document.write("Engine:"+engine+"<br>");

document.write("Radio:"+theradio);

}

八.两个预定义对象(这两个对象都是window对象的一部分,可以通过window.navigator.property访问其属性,但是也可以直接使用):

①导航对象navigator对象的属性:

appCodeName——浏览器的代码名称

appName——浏览器的全名

appVersion——浏览器的版本和其他的一些信息

还有一些其他的

②history对象的属性:

length——返回浏览器当前窗口的历史回话页面的数量

③history对象的方法:

back(),使浏览器返回浏览器历史列表中的后一页

forward(),使浏览器返回浏览器历史列表中的前一页

go(),接收一个整形参数,可正可负,代表前进和返回几个页面,如果参数超过历史列表内容,将什么也不做。

 

 

 

 

 

© 著作权归作者所有

湖心亭看雪
粉丝 20
博文 50
码字总数 15707
作品 0
武汉
程序员
私信 提问
javascript入门经典【推荐】—新手必备、零基础学习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a125138/article/details/7819466 本书目录 第一章: JavaScript语言基础第二章: JavaScript内置对象 第三章...

续写经典
2012/08/01
0
0
WebSocket 协议 RFC 文档(全中文翻译)

概述 经过半年的捣鼓,终于将 WebSocket 协议(RFC6455)全篇翻译完成。现在将所有章节全部整理到一篇文章中,方便大家阅读。如果大家想看具体的翻译文档,可以去我的GitHub中查看。 具体章节...

黄Java
02/19
0
0
Oracle数据库学习的福利来啦——最佳入门经验分享

适用人群:从事数据库技术实施或售后工程师,准备参加OCA,OCP认证考试 通过学习对Oracle数据库的相关基础知识进行梳理,最终共同提炼出必须最先掌握的那部分知识,无论你是数据库开发、管理、...

让往事随风
2016/04/13
34
0
《代码大全2》学习笔记2

第二部分:创建高质量的代码 第五章:软件构建中的设计 “在大型项目中,设计可能会详细到让编码工作近乎机械化” “在小型项目中,设计可能就是指用伪代码写个类的接口,或者询问旁边的程序...

angel_64
2016/04/25
0
0
【译】 WebSocket 协议第十二章——使用其他规范中的WebSocket协议

概述 本文为 WebSocket 协议的第十二章,本文翻译的主要内容为如何使用其他规范中的 WebSocket 协议。 有兴趣了解该文档之前几章内容的同学可以见: 【译】WebSocket 协议——摘要( Abstra...

黄Java
02/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 新手阿里云服务器安装mongodb

简介 MongoDB 是一个基于分布式 文件存储的NoSQL数据库 由C++语言编写,运行稳定,性能高 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案 MongoDB特点 模式自由 :可以把不同结构的文档存...

醉雨
17分钟前
1
0
sql注入漏洞,应屏蔽SQL注入攻击

注:SQL注入好比是前端URL传参数请求时参数以SQL 做为参数传入,如 select 1 from dual where 1=1 or 1=1 and 1=2;(类似这样的SQL语句) 防御方法 如果自己编写防注代码,一般是先定义一个函...

颜丽
17分钟前
1
0
装饰者模式

 代理模式与装饰者模式看起来很像,都实现基础对象实现的接口,在其自身对象中都保存着对被代理/被装饰者的对象引用。   先来看看装饰者模式的定义:动态的将责任附加到被装饰者对象上,用...

铁骨铮铮
21分钟前
0
0
我为什么飞行 10000 公里去西班牙参加 KubeCon?

2019 年 5 月 20 日至 23 日, 由 Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 KubeCon + CloudNativeCon EU(欧洲场)即将在热情洋溢的巴塞罗那盛装启幕。 作为云计算领...

zhaowei121
39分钟前
0
0
Node.getTextContent() not found 解决办法【不需要调整builder path下面包顺序】

新导入的工程,w3c的getTextContent找不到,response的setCharacterEncoding找不到,网上很多教程都是“调整工程builder path的lib包顺序把jre、tomcat调到上面即可”,但是进入项目的build...

嘿嘿嘿IT
46分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部