javascript对象初识

mac2025-03-13  15

对象

何为对象:万物皆对象 客观世界中的具体的实体就是对象 如 一个人 一个气球 一辆汽车 每一个对象实体都有对应的特征

思考:

咱们班的班主任这个对象怎么描述 特征 行为 咱们班的小马哥这个对象怎么描述 特征 行为

为什么要学习对象?

思考:上述对象都是客观世界的,那JS这门语言中为什么要有对象呢 又如何用代码去描述一个对象呢

数组:是有序的元素集合 ,数组用于存放一组数据,比如一个班级所有人的名字,一个班级所有人的成绩。

函数:封装一段重复的代码,只要声明一次,就可以多次调用。

思考1:如果要存储一个人的信息,应该怎么办? var name = "张三"; var age = 18; var sex = "男"; var hobby = "上网"; 思考2:这么做的缺点是什么? 这些变量都是属于一个人的,应该跟数组一样,使用一个集合把所有的信息都存储起来。

对象:是一组无序的键值对的集合。

事物的特征在对象中用属性来表示。事物的行为在对象中用方法来表示。 //数组多个元素之间使用,隔开 //对象中多个键值对之间也用,隔开,,,键值对的格式: 键:值 var obj = { name:"张三", age:18, sex:"男", hobby:"上网", greet: function() { console.log('你好呀!!'); } }

操作对象

操作对象: 增 删 改 查 查语法: 对象.属性 console.log(obj.name); console.log(obj.age); 改语法: 对象.属性 = 新的值; obj.name = 'ls'; obj.age = 38; 增语法: 和改语法是一样的, 如果该属性是存在的就是改 如果不存在就是添加 obj.girlFriend = 'wmz'; 删除语法: delete 对象.属性 delete obj.girlFriend

创建对象和使用

字面量的形式 11 “abc” true [] {}等

var o = { name : "zs", age : 18, sex : true, sayHi : function() { console.log(this.name); } };

通过Object构造函数创建

var hero = new Object({ name: 'zs', age: 18 });

实例(了解)

实例:就是实际的例子 例如:“人” 是一个模板(构造函数) 而飞飞则是这个模板的一个实例 或者“猫” 是一个模板(构造函数) 而我家的猫 则是这个模板的一个实例 JS内部提供了不同数据的模板,都可以通过new去创建出一个新的实例出来

// 得到数组的实例 var arr = new Array(1,2,3); console.log(arr); // 得到普通对象的实例 var obj = new Object({name:123}); console.log(obj); // 得到函数的实例 var fn = new Function('a','b','c','d'); console.log(fn); // 得到数字的实例 var num = new Number(123); console.log(num); // 得到布尔的实例 var bool = new Boolean(true); console.log(bool); // 得到字符串的实例 var str = new String('123'); console.log(str); // 上述都是JS内部提供的 但JS没有提供学生(模板) 所以需要动手创建 // var stu = new Student('小明',18);

##批量创建对象

在实际开发中,经常需要创建多个相同类型的对象,比如游戏中的怪物,班级的学生等。

使用工厂函数创建对象

// 上述都是重复去做一件事情 重复去做一件事情 我们就可以利用function封装 然后重复调用 传递对应的参数 function creatStudent(name, age, height, hobby) { var obj = { name: name, age: age, height: height, hobby: hobby, sayHi: function () { console.log('Hello everyone'); }, study: function () { console.log('好好学习 天天向上'); } } return obj; } var xmg = creatStudent('xmg', '16', 180, '嘿嘿'); var wt = creatStudent('wt', '14', 180, '嘻嘻'); var ff = creatStudent('ff', '18', 110, '呼呼');

优点:可以同时创建多个对象 缺点:麻烦,并且没有原型关系(JS高级精讲)同时没有类型

构造函数 和 new运算符

// 构造函数名字大写 function Student (name, age, hobby, gender){ this.name = name; this.age = age; this.hobby = hobby; this.gender = gender; } var obj = new Student('小马哥', 18, '开车', '未知');

new 运算符

创建一个新的对象 类型从属于对应的构造函数将this指向这个新对象执行构造函数返回这个新对象

new运算符一般配合构造函数使用 这种方式创建对象更加简单。并且有原型关系(JS高级精讲)可以看到数据类型

[]语法操作对象属性

对象[“属性名”]

有些种情况不适合用.语法拿属性值,比如伪数组,此时用只能用[]

var obj = { name: 'feifei', age: 18, gender: '男', i: 1 }; console.log(obj.age); var obj1 = { name: '马哥', 'true-age': 20 } console.log(obj1); // 关联数组的方式 console.log(obj1["true-age"]); // 点语法可以操作对象的属性 但是如果属性名中有-这些特殊字符的 通过.语法就操作不了 // 但是我们可以利用关联数组的方式去操作 // 对象['属性名'] 或者 对象.属性名 var i = "name"; console.log(obj.i); // undefined 因为JS解析器会把I作为对象的属性 而当前对象并没有i这个属性 所以是udnefined console.log(obj[i]);// 关联数组的方式不加引号 会解析成变量 将变量里面存的值作为对象属性 console.log(obj["i"]); // 添加上了引号 直接解析成对象对应的属性

总结:

如果对象的属性存在-这种的 那么使用.语法无法操作 但是[]形式可以[]语法可以使用变量代替属性 但是.语法不可以 如果[]语法里面的值添加了引号 那么就和.语法一样

遍历对象

for遍历的问题:

对象的长度 也就是说循环多少次获取对象里面的具体属性

通过for in语法

var obj = { name: 'feifei', age: 15, gender: 'male' }; /*for(var i = 0; i < 3; i++){ obj[0] };*/ // for循环遍历对象的两个问题: // 1、对象的长度 也就是说循环多少次 // 2、获取变量里面的具体属性 for(var attr in obj){ // console.log('1'); // console.log(attr); console.log(obj[attr]); }

引用数据类型和值数据类型

简单数据类型(值类型) 在存储时,变量中存储的是值本身,因此叫做值类型。 如:number string boolean undefined null 复杂数据类型 (引用类型) array object function 在存储时,变量中存储的仅仅是地址(引用),因此叫做引用数据类型

思考题:

//1. function Person(name, age) { this.name = name; this.age = age; } var p1 = new Person("zs", 18); var p2 = p1; p2.name = "ls"; console.log(p1.name); console.log(p2.name); //2. function Person(name, age) { this.name = name; this.age = age; } function f1(p) { p.name = "ls"; console.log(p.name); } var p1 = new Person("zs", 18); console.log(p1.name); f1(p1); console.log(p1.name);

结论:简单类型存储的是值本身,复杂类型存储的是地址,如果把第一个对象赋值给另一个变量,此时两个变量会指向同一个对象。

最新回复(0)