个性化阅读
专注于IT技术分析

JavaScript基础快速入门教程(六):对象详解和编程实例

一、什么是对象?

通俗的对象就是一个物体,例如计算机、手机等,对象有属性和功能函数,例如手机的重量是它的属性,手机能播放音乐是它的功能函数。不过这还太通俗,往往还不能很符合编程的方式,在编程的世界里,对象是一种数据结构,在面向对象编程里,对象拥有属性和函数,对象是针对某一功能的整体封装,例如web开发中,可以将用户封装成user对象,每个用户有名称name和年龄age:

javascript对象的解析

JavaScript中的对象都是动态的,可以动态添加属性和函数,这和C++、java等一些语言不大相同,这种动态的特点实际上写的太随便也不好控制,有时还是要当做强类型编程会好一点。

JavaScript中除了基本类型的字符串类型、数值类型、布尔类型、null和undefined之外的类型都是引用类型,对象类型是一种引用类型。基本类型和引用类型的根本区别在于存储的位置不同,生命周期也不同,对象在堆中,基本数据类型在栈中,后面还会谈到的Array数组类型、Date类型、Function类型都是引用类型。

二、对象的创建方式

javascript创建对象

JavaScript创建对象的方式有两种,一种是使用new运算符创建Object对象,另一种是使用对象字面量的方式创建对象。

1、使用Object类创建Object对象实例,类是一个模板,对象是类模板的一个实例,类不会存在内存中,只有实例对象存在内存中使用,JavaScript中,对象的属性和函数都可以动态添加给Object实例,使用new Object()创建实例,new是一个操作符,Object()是一个构造函数,这个构造函数和之前说过的String()函数一样,前面加上new就自动成为了构造函数,Object()函数返回一个对象实例。

创建对象的实例如下:

/**
 * 使用new操作符创建对象
 * Object()是一个函数,加载new操作符成了构造函数
 * Object()函数返回一个对象实例
 *  */
var user = new Object();
console.log(typeof(user)); // 输出:object
// 动态添加属性
// 方式一,使用.点操作符:
user.name = "Tomcat";
// 方式二,使用[]:
user.email = "tomcat@apache.org";

// 动态添加函数,函数也是对象的属性,所以同样可以使用点.操作符和[]
// 添加函数属性,使用匿名函数
user.login = function(){
    console.log("user login: " + this.email);
}
user["logout"] = function(){
    console.log("user logout: " + this.email);
}

// 访问属性和函数同样可以使用点.操作符和[]
console.log(user.name);
console.log(user["email"]);
user["login"]();
user.logout();

2、使用对象字面量创建对象

字面量的意思就是直接写出来,对象字面量方式创建主要是键值对的形式,键值对即:属性名称+冒号+属性值,每个键值对用逗号隔开,也称为JSON对象,它就是一种键值对的数据格式,创建对象后同样可以动态添加属性和函数,重复定义的属性或函数会被后面的覆盖掉。

使用对象字面量创建对象的实例如下:

// 使用对象字面量创建对象
var post = {
    title: "You belong to me",
    author: "Bob Dylan",
    content: "see the pyramids along the Nile",
    fly: function(){
        console.log("fly the ocean in a silver plane");
    }
};

post.createTime = new Date().toLocaleString();
console.log(post.title);
console.log(post.author);
console.log(post.createTime);
post.fly();

三、对象的内存解释:堆和栈

javascript对象解析堆和栈内存空间

浏览器从服务器加载JavaSript代码,解析并执行,尽管JavaSript是一种解析语言,但是它仍然有着和其它语言相类似的内存管理模式,内存管理是编程语言的核心,从根本上来说,我们编程其实就是面向栈/堆编程?

栈和堆是什么呢?它们是内存中的两种空间,一般来说一个JavaSript程序拥有自己的内存空间,这个内存空间可分为栈区、堆区、全局静态区、文字常量区、程序代码区,全局静态区存放一些全局变量,文字常量区存放一些字面值变量。在这里我们重点解析一下栈区和堆区。

栈区的内存由系统自动分配,自动释放,而且栈区的空间有限,一般都比较小,但是执行速度快,堆区由程序动态申请空间,理论上不受限制,速度相对慢一些。

栈区一般先进后出,从第一段代码执行开始入栈 ,后面的代码陆续入栈,如下面一段代码,var tag = “name“;先入栈执行,tag变量存放在栈空间中,file对象则存放在堆空间中,执行到fly()函数,先将fly函数的代码压栈执行,完成后再向下继续执行,这称为一个线程,一个栈区对应一个线程,只能由上至下执行。

var tag = "name";
var file = new {
    name = "dir"
};
post.fly();

在C/C++里,堆内存一般需要程序员手动释放,不过在JavaSript不用,JavaSript动态管理内存,所以你也不用过于担心这个问题,不过理解堆和栈可以让你更清楚编写的代码究竟是什么意思,例如后面还有一个JavaSript单线程和消息异步执行的概念,也需要对栈和堆有所了解。

四、对象的属性详解

删除对象的属性使用delete操作符删除,delete object.value删除object对象的value属性,例如:

delete post.title;
console.log(post.title); // 输出undefined

但是要注意,delete不能删除使用var声明的变量。

那么JavaSript如何检测对象是否存在某属性呢?使用in操作符 ,”value” in object表示判断value属性是否在object中,例如:

// 使用in操作符检测对象是否含有某属性
var image = {
    title: "nake",
    format: "jpeg"
}
delete image.title;
console.log("nake" in image); // 输出:false

使用for in循环遍历对象的属性,for(var value in object),使用var声明一个value变量接收object对象的所有属性,要注意的是,遍历得到的value是属性的名称字符串,而不是属性的值,使用实例如下:

// 使用for in遍历对象的所有属性
var movie = {
    title: "Once upon a Time in America",
    director: "Leone",
    content: "A story of a old time in Armerica" 
}
for(var attr in movie){
    console.log("[" + attr + "]");
    // 访问对象的属性
    console.log(movie[attr]); // 输出对象所有属性的值
} // 输出:title  director content

五、对象的构造函数和原型

JavaScript中每个对象都有自己的原型对象(null没有),对象可以直接使用原型对象的方法和属性,console.log(movie)输出movie对象的结构:

javascript对象的原型对象的函数和属性

可以看到move对象有一个__proto__属性,这个就是对象的原型对象,原型对象中有Object()函数,这个就是构造函数,另外还有我们常见的toString()、toLocalstring函数,对象可以使用原型对象的所有属性和方法,这就实现了面向编程中的继承。

这里我们先简单了解一下JavaScript的原型,后面会详细讲解,因为原型也是JavaScript中的核心内容。

赞(0)
未经允许不得转载:srcmini » JavaScript基础快速入门教程(六):对象详解和编程实例

评论 抢沙发

评论前必须登录!