前端JavaScript

复习笔记之对象(非面向对象)

2020-03-29  本文已影响0人  晚月川

对象

万物皆对象,对象是一个具体的事物
在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如:字符串、数值、数组、函数等

创建变量的三种方式

使用对象

变量、属性、函数、方法的区别

利用new Object创建对象

var obj = new Object(); // 创建了一个空对象
obj.name = '赵四';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~');
}
// 利用等号赋值的方法添加对象的属性和方法
// 每个属性之间用分号结束
console.log(obj.name);
console.log(obj['sex']);
obj.sayHi();

利用构造函数创建对象

因为前两种创建对象的方式一次只能创建一个对象,里面很多的属性和方法是相同的,所以可以利用函数的方法,重复这些相同的代码,这个函数就被称为构造函数构造函数里面封装的是对象
构造函数就是把对象里面一些相同的属性和方法抽象出来封装到函数里面

============

构造函数的语法格式:
function 构造函数名() {
    this.属性 = 值;
    this.方法 = function() {}
}
new 构造函数名();
// 构造函数名字首字母要大写
// 构造函数不需要return就可以返回结果
// 调用构造函数必须使用new
// 是要new Star()调用函数就创建了一个对象
// 属性和方法前面必须加this
// 示例如下:
function Star(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
        console.log(sang);
    }
}
var byc = new Star('白月初',18,'男'); // 调用函数返回的是一个对象
console.log(byc.name);
console.log(byc.age);
console.log(byc['sex']);
byc.sing('狐妖小红娘');
构造函数和对象的相互联系
构造函数中new的作用

构造函数执行的步骤

  1. new 构造函数在内存中创建了一个空的对象
  2. this就会指向刚才创建的空对象
  3. 执行构造函数中的代码,给这个空对象添加属性和方法
  4. 返回这个对象(所以构造函数中不需要return)
    • 有return,并且返回基本类型值,最后返回的结果还是类的实例;如果返回一个引用数据类型,则会把默认把返回的实例给覆盖掉,这样我们接受结果就不再是当前类的实例了,而是自己返回的值 => 真实项目中,如果想创建类的实例,则建议大家不要手动写return了,防止实例被覆盖

遍历对象

for in循环:用于对数组或对象的属性进行循环操作

// for in循环格式
// for(var 变量 in 对象){}
var obj = {
    name: '白月初',
    age: 18,
    sex: '男'
}
for(var k in obj) {
    console.log(k); // k 输出变量得到的是属性名 
    console.log(obj[k]); // obj[k] 得到的是属性值
}
// 使用for in里面的变量,常用 k / key

对象总结

  1. 对象可以让代码结构更清晰
  2. 对象是引用数据类型值object
  3. 本质:对象就是一组无序的相关属性和方法的集合
  4. 构造函数泛指一大类
  5. 对象(实例)特质一个事物
  6. for in循环用于对对象的属性进行循环操作
上一篇下一篇

猜你喜欢

热点阅读