JavaScript——驰骋网页的脚本执行者(3)

五、对象及函数

ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合,是一种复杂的引用数据类型,引用数据类型的函数和数组也可以看成是一种特殊的对象。

1.对象的创建

可以使用构造函数创建对象(Object是所有对象的根对象,一个普通对象都会直接间接的继承Object),如:

var person = new Object();

person.name = "briup";

person.age = 22;

也可以使用对象字面量表示法创建对象,不同的属性之间用‘,‘分割,属性名和属性值之间用‘:‘分割,属性名可以不使用双引号,当属性名中包含特殊字符一定使用单/双引号,属性值一般为常量或者具体的值,也可以变量,如:

var person = {

name : "briup",

age : 22

};

 

2.对象属性的访问与删除

使用点表示法访问属性:右侧必须是以属性名称命名的简单标识符,如person.name;

使用中括号表示法访问属性:中括号中必须是一个计算结果为字符串的表达式,可以通过变量访问属性,如果属性名中含语法错误的字符,或者属性名使用的是关键字或保留字,可以使用中括号表示法访问,如person["name"]。

使用delete删除属性:如delete obj1.name。delete只是断开了属性和宿主对象的联系,而不会操作属性区中的属性,并且delete只会删除自有属性,不能删除继承属性。在销毁对象时,为了防止内存泄露,遍历对象中的属性,依次删除所有属性。

3.对象属性的检测

in可以检测某属性是否是某对象的自有属性或者是继承属性;

hasOwnProperty()可以检测给定的属性是否是对象的自有属性,对于继承属性将返回false;

propertyIsEnumerable()可以检测给定的属性是否是该对象的自有属性,并且该属性是可枚举的。通常由JS代码创建的属性都是可枚举的,但也可以使用特殊的方法改变可枚举性。例如:

var o = {

x:1

}

console.log(x in o); //true x为o的属性

o.hasOwnProperty("x"); //true x为o的自有属性

o.hasOwnProperty("y"); //false o中不存在属性y

o.hasOwnProperty("toString"); //false toString不属于自有属性

o.propertyIsEnumerable(“x”); //true 自有属性可枚举

o.propertyIsEnumerable(“toString”); //false 继承属性不可枚举

因为所有对象都继承了Object,所以Object类型具有的任何属性和方法也同样存在于其他对象中。Object中常用的方法:

constructor; //保存用户创建当前对象的函数

hasOwnProperty(propertyName); //检查给定的属性名是否是对象的自有属性,

toString(); //返回对象的字符串表示

valueOf(); //返回对象的字符串,数值,布尔值的表示。

propertyIsEnumerable(propertyName); //检查给定的属性在当前对象实例中是否存在

isPrototypeOf(object); //检查传入的对象是否是原型

toLocaleString(); //返回对象的字符串表示,该字符串与执行环境的地区对应

4.对象的遍历

使用增强for循环遍历对象及其属性,如:

var obj = {

name:"terry",

age:12

}

for(var key in obj){

//获取属性值

var value = obj[key];

console.log(key, value);

}

obj可以为对象或者数组;key表示对象的属性名或者是数组的索引;在运行的时候,每次从obj中获取一个属性名或者索引赋值给key(如果数组中存放的是对象,则正常打印索引,对象则调用toString()打印对象的属性名和属性值),然后执行循环体。

5.对象序列化

对象序列化是指将对象的状态转换为字符串,也可以反序列化,将字符串还原为对象函数。RegExp,Error对象,undefined值不能序列化和反序列化。

JSON.stringify(obj); //将对象序列化为Json字符串,只能序列化对象可枚举的自有属性

JSON.parse(jsonStr);//反序列化

6.函数的介绍

函数允许我们封装一系列代码来完成特定任务。当想要完成某一任务时,只需要调用相应的代码即可。浏览器为我们提供了很多内置方法,我们不需要编写代码,只需要调用方法即可完成特定功能,比如排序、反转等数组操作函数,生成随机数函数等。

7.函数的声明

函数由function关键字声明,后面紧跟函数名,函数名后面为形参列表,列表后大括号括起来的内容为函数体。也可以将一个匿名函数(没有函数名的函数)赋值给一个函数变量,这种方式成为函数表达式。

函数声明:

function 函数名(形参列表){

//函数体

}

函数表达式:

var 函数名 = function 函数名(形参列表){

//函数体

}

解析器在向执行环境中加载数据时,会率先读取函数声明,并使其在执行任何代码之前可用;但对于函数表达式来说,当执行器执行到函数表达式代码的时候才会真正的解释执行。

8.函数的内部属性

只有在函数运行的时候才能确定其值的属性,只能在函数内部访问。

函数的内部属性主要有三种:

形参:接收实参的快捷方式

arguments:以类数组对象接收所有的实参,arguments:{0:实参1,1:实参2,2:实参3}

this:当前对象(执行环境对象)

this的取值与该函数的调用方式有关:

如果函数使用"()"来调用,那看一下"()"前面是不是函数名,如果是,看函数名前面有没有对象,如果有,this指向该对象,否则指向全局对象(window/global);

如果通过call,apply来调用,this为发生调用动作的对象。

函数还有个length属性(非内部属性),用来确定形参的个数。

9.函数的调用

函数声明好之后并不会直接允许,需要进行调用才能运行。调用方法主要有:

函数名(实参列表);

函数名.call(执行环境对象this,实参列表);

函数名.apply(执行环境对象this,实参列表数组);

10.作用域相关问题

如果一个变量声明在函数中,那么这个变量只能在函数中访问,当函数执行完毕后,这个变量就会被释放掉。

除了在函数内的特点之外,JavaScript中的var不存在局部作用域,注意不要重复声明,ECMAScript新版本中推荐使用let来声明变量。当以下代码运行在nodejs中时,a访问不到;但当它运行在浏览器中时,a的值为3。

function foo(){

if(true){

// 局部作用域,a只能在当前代码块生效

var a = 3;

}

console.log(a);

}

11.值传递与引用传递

基本数据类型的变量可以直接操作保存在变量中的实际的值,参数传递的时候传递的是实际值,即复制时在栈区将和原变量相同的值复制一份给新变量,作为新变量的值。

引用数据类型的变量不能直接操作对象的内存空间,只能操作对象的引用。可以为引用类型变量添加属性和方法,也可以改变和删除其属性和方法。参数传递的时候传递的是引用地址,即复制时是把原变量中保存的堆内存对应地址复制一份给新变量,作为新变量的值。

原文地址:https://www.cnblogs.com/wodeqiyuan/p/11408569.html

时间: 2024-10-09 05:53:31

JavaScript——驰骋网页的脚本执行者(3)的相关文章

JavaScript——驰骋网页的脚本执行者(1)

一.关于JavaScript JavaScript诞生的初衷,是为了减轻网站中表单验证部分对后台服务器和用户双方造成的负担,使一些基础数据检验在前台页面就能够完成,而不用浪费后台服务器资源,同时也减轻了后台验证时返回的页面跳转动作带来的网络负担. JavaScript最初的名字叫LiveScript,后来为了搭上媒体上热炒的java顺风车(蹭热度),在正式发布前夕改名为JavaScript.由于浏览器厂商对脚本控制的不同实现方式,当时的JavaScript有着不同的版本,但在欧洲计算机制造商协会

JavaScript——驰骋网页的脚本执行者(4)

六.数组 1.数组的介绍 ECMAScript数组是有序列表,是存放多个值的集合,属于引用数据类型.它的特性有: 每一项都可以保存任何类型的数据: 数组的大小是可以动态调整的: 可以访问或改变数组的length属性(数组也是一种对象,length是表示数组长度的属性,length表示数组中数组项的个数):通过设置length的值在数组末尾移除数组项,或者向数组中添加新的数组项. 2.数组的创建 使用Array构造函数创建数组,如: var arr = new Array(); var arr =

JavaScript——驰骋网页的脚本执行者(2)

四.流程控制语句 1.分支 if语句 condition表示任意表达式,该表达式求值的结果不一定是布尔类型,如果不是布尔类型,ECMAScript会调用Boolean()转换函数将这个表达式结果转换为一个布尔类型,当该值为true时,执行if代码块中的内容. if-else语句 当condition为true时,执行if代码块中的内容,否则,执行else代码块中的内容,一般情况下,如果代码块中代码只有一行,可以省略大括号. if-else if-else语句,如: if(condition1){

将JavaScript 插入网页的方法

将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的...就是代码的内容.JavaScript的插入位置不同,效果也会有所不同,还可以像CSS一样,将JavaScript保存成一个外部文件,这些内容会在下一节讨论. 用JavaScript在网页中输出内容 JavaScript使用document.write来输出内容.例如  document.writ

html dom与javascript的关系 -我们用JavaScript对网页(HTML)进行的所有操作都是通过DOM进行的

一,什么是DOM (参考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什么 DOM全称为The Document Object Model,应该理解为是一个规范,定义了HTML和XML文档的逻辑结构和文档操作的编程接口. 文档逻辑结构 DOM实际上是以面向对象方式描述的对象模型,它将文档建模为一个个对象,以树状的结构组织(本文称之为"文档树",树中的对象称为"节点").每个文档包含1个document节点,0

【JavaScript】网页节点的增删改查

一.基本概念 这部分也就是所谓的"HTML DOM",所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式. 也就是所有网页都必须按照:<html><body></body></html>--的规则编写,也按照这样的规则加载. 所谓的"网页节点",也叫"DOM节点"的通俗解释,例如html节点下的内容就是<html></html>之间所有内容,b

读javascript高级编程12-HTML5脚本编程

一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性,如果发现域不匹配则不会进行操作. 2.接收消息 接收到消息时,会触发window对象的message事件.传递给onmessage事件处理程序的对象主要包含三个信息: data:对应postMessage()第一个参数传入的内容: origin:发送消息的文档所在域.接收到消息后,检测消息来源是非常

用JavaScript实现网页动态水印

原文:用JavaScript实现网页动态水印 1.基本原理 页面加载后,通过javascript创建页面元素div,并在div元素中创建文本节点,展示水印内容 设置div元素样式,将其zIndex设置一个较高的值,并设置透明度,实现浮在页面的水印效果 其核心逻辑如下所示 var mask_div = document.createElement('div'); mask_div.id = 'mask_div1'; mask_div.appendChild(document.createTextN

通过javascript在网页端生成zip压缩包并下载

原文:通过javascript在网页端生成zip压缩包并下载 zip.js是什么 zip.js的github项目地址:http://gildas-lormeau.github.io/zip.js/ 通过zip.js封装一个能在网页端生成zip文件的插件, 直接在网页中创建包含文件夹和文件的压缩包,也可以自定义名字并下载: 如何使用: 1:引用zip.js 2:引用jQuery; 3:并引用封装的ZipArchive.js ,(因为zip.js的api使用起来比较繁琐,所以自己封装实现了这个插件)