以下是html代码,个人建议放在IDE里运行,边看效果,边学习~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS初步(十)——对象(一)</title> <script> /* 回顾一下之前提到的JS中的数据类型: - String 字符串 - Number 数值 - Boolean 布尔值 - Null 空值 - Undefined 未定义 以上五种类型属于基本类型,以后碰到某些值不是上面五种,那么全是对象 - Object 对象 基本数据类型都是单一的值,例如"Hello" 123 true ,值和值之间没有任何联系 举个例子,在JS中表示一个人的信息(name age sex) var name = "李耳"; var age = 99; var sex = "男"; 以上三个变量虽然都表示一个人的信息,但彼此之间没有任何联系,并不是一个整体, 所以为了能让它们之间产生联系,就要把它们放到一起(暂且这么理解,学深入之后自然会懂), 而对象恰恰就是让它们放在一起的容器,我们可以将上述三个变量统一放到一个对象(Object)里,以此来建立关系 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性(也就是变量,只不过在对象里叫做属性) 对象的分类: 1.内建对象 - 由ES标准中定义的对象,在任何的ES的实现中都可以使用 比如:Math String Number Boolean Function Object...等都属于内建对象 2.宿主对象 - 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象 比如:BOM DOM 以及它们里面含有的一个我们经常用的对象:console,document同理 我们用的console.log()其实就是从console对象里调用名叫log的方法 3.自定义对象 - 由开发人员自己创建的对象 */ /* 要想使用对象,首先就要创建对象(创建对象代码见下方) - 使用new关键字调用的函数,是构造函数constructor构造函数是专门用来创建对象的函数 */ var obj = new Object(); //这里调用了Object这个函数,来自于内建对象,我们利用它来创建对象 console.log(obj); //输出瞧瞧(我用的是Chorme浏览器,不同的浏览器可能输出效果不同),发现为空 console.log(typeof(obj)); //输出类型瞧瞧,显示object /* 在对象中保存的值称为属性 向对象中添加属性,即之前所称的变量 语法: - 对象.属性名 = 属性值; 属性名即属性的名称,属性值即属性的值 */ //向obj中添加一个name属性 obj.name = "李耳"; //添加属性,或者叫生成属性,自己意会即可 console.log(obj); //输出obj对象看看,发现在原本是空的{}中出现了name: "李耳" //再向obj中添加一个age属性和sex属性 obj.age = 18; //注意属性类型,即变量类型 obj.sex = "男"; console.log(obj); //再输出obj对象看看 //这样看是不是发现age和name之间有关系了呢,没错它们之间的联系就是obj这个对象!是间接关系! /* 读取对象中的属性来进行使用 语法:对象.属性名 */ //读取obj对象中的name属性来作为输出的内容(其它属性同理) //注意如果name前面不带obj,说明这个name不是在obj里的那个,而是没被放在对象里的孤儿name,这个时候它叫变量 console.log(obj.name); //输出看看,显示李耳 console.log(obj.dao); //输出一个不存在的属性看看,显示undefined /* 修改对象的属性的属性值 语法: - 对象.属性名 = 新值; 你会发现这跟生成属性的语法一模一样,唯一不同的是,这个时候属性已经被创建出来了 */ //修改obj对象中的sex属性的值 obj.sex = "女"; console.log(obj); //输出看看 /* 删除对象的属性 语法: - delete 对象.属性名; */ delete obj.sex; console.log(obj.sex); //看看是否删除了 </script> </head> <body> </body> </html>