自定义对象基本概念
在js中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：属性的行为，在对象中用方法来表示（常用动词）
为什么需要对象
保存一个值时,可以使用变量,保存多个值（一组值）时, 可以使用数组。如果要保存一个人的完整信息则使用对象
利用对象字面量创建对象
- 利用对象字面量创建对象{}
- 里面的属性或者方法采取的是键值对的形式 键 属性名：值 属性
- 多个属性或者方法中间用逗号隔开
- 方法冒号后面跟的是一个匿名函数
- 使用对象
- 调用对象的属性，对象名.属性名
- 调用对象的属性，对象名['属性名']
- 调用对象的属性，对象名.方法名() 千万不要忘记添加小括号
<script>
// var obj{} 创建了一个空的对象
var obj = {
name: "陈一",
age: 18,
sex: "男",
sayHi: function () {
console.log("hello");
},
};
console.log(obj.name);
console.log(obj["sex"]);
obj.sayHi();
</script>
变量、属性、函数、方法的区别
- 变量和属性是相同的，都是用来存储数据的。 变量单独声明并赋值，使用的时候直接写变量名，单独存在
- 属性 在对象里面的不需要声明的，使用的时候必须是 对象.属性
- 函数和方法的相同点 都是实现某种功能，做某件事。函数是单独声明，并且调用的 函数名()单独存在的
- 方法 在对象里面 调用的时候 对象.方法
<script>
var num = 10;
var obj = {
age: 19,
fn: function () {},
};
function fn() {}
console.log(obj.age);
//console.log(age); 报错
</script>
利用new Object创建对象
- 利用等号赋值的方法，添加对象的属性和方法
- 每个属性和方法之间用 分号结束
<script>
var obj = new Object(); //创建了一个空的对象
obj.uname = "陈一";
obj.age = 18;
obj.sex = "男";
obj.sayHi = function () {
console.log("hi~");
};
console.log(obj.uname);
console.log(obj["age"]);
obj.sayHi();
</script>
为什么需要构造函数
- 为什么需要构造函数？ 因为前面两种创建对象的方式一次只能创建一个对象
- 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的我们只能复制
- 因此我们可以利用函数的方法重复这些相同的代码，我们就把这个函数称为构造函数
- 又因为这个函数不一样，里面封装的不是普通代码，而是对象
- 构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
<script>
var ldh = {
uname: "刘德华",
age: 55,
hobby: function () {
console.log("唱歌");
},
};
var zxy = {
uname: "张学友",
age: 50,
hobby: function () {
console.log("跳舞");
},
};
</script>
利用构造函数创造对象
-
构造函数首字母必须大写
-
构造函数不需要使用return 就可以返回结果
-
调用构造函数，必须使用 new
-
只要new Star() 调用函数就创建一个对象 ldh {}
-
属性或者方法前面必须添加 this
构造函数的语法格式： function 构造函数名() { this.属性 = 值; this.方法 = function () {}; } new 构造函数名(); new 构造函数名<script> function Star(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sing = function (sang) { console.log(sang); }; } var ldh = new Star("刘德华", 18, "男"); //调用函数返回的是一个对象 // console.log(typeof ldh); console.log(ldh.name); console.log(ldh["age"]); ldh.sing("冰雨"); console.log("---------------"); var zxy = new Star("张学友", 19, "男"); console.log(zxy.name); console.log(zxy.age); zxy.sing("李香兰"); </script>
构造函数和对象的区别
-
构造函数 明星 泛指的某一大类 它类似于 java 语言里面的 类(class)
-
对象 特指 是一个具体的事物 刘德华 == {name: "刘德华", age: 18, sex: "男", sing: ƒ}
-
我们利用构造函数创建对象的过程我们也称为对象的实例化
<script>
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function (sang) {
console.log(sang);
};
}
var ldh = new Star("刘德华", 18, "男"); // 调用函数返回的是一个对象
console.log(ldh);
</script>
new关键字执行过程
- new 构造函数可以在内存中创建了一个空的对象
- this 就会指向刚才创建的空对象
- 执行构造函数里面的代码 给这个空对象添加属性和方法
- 返回这个对象
<script>
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function (sang) {
console.log(123);
};
}
var ldh = new Star("刘德华", 18, "男");
console.log(ldh);
</script>
遍历对象
for in 遍历对象
for (变量 in 对象) {
}
<script>
var obj = {
name: "pink",
age: 18,
sex: "男",
fn: function () {},
};
// console.log(obj.name);
// console.log(obj.age);
// console.log(obj.sex);
for (var k in obj) {
// console.log(k); //k变量 得到的是 属性名
console.log(obj[k]); //得到的是 属性值
}
</script>