fo对象(object)是 一组属性和方法的集合,对象内部属性都与此对象相关,属性可以为多种类型

简易对象创建:

  1. var obj={
  2. name:'姓名',
  3. sex:'性别',
  4. age:18
  5. }

6.1 对象的创建

1. 对象字面量创建对象

  1. var 对象名 = {
  2. 属性名: 属性值,
  3. 属性名: 属性值,
  4. 属性名: 属性值
  5. }

例子:

  1. var student = {
  2. name:'宋'
  3. sex:'男'
  4. think : function(){
  5. alert('我认为还是不行')
  6. }
  7. };

2. 对象属性的使用使用

调用对象属性

  1. console.log(对象名.属性名)
  2. console.log(对象名['属性名'])
  3. console.log(student.name)
  4. console.log(student['name']) //调用名字属性
  • []里必须加''

调用对象方法

  1. 对象名.方法名();
  2. student.think();

3. 使用 new Object创建对象

创建空对象:

  1. var student = new Object();

创建对象,但对象此时内容为空


添加属性和方法:

  1. student.name = '宋';
  2. student.sex = '男';
  3. student.age = 18;
  4. student.think = function(){
  5. alert('我认为还是不行')
  6. }

注意:

  • Object() 函数的第一个字母大写
  • new 关键字不能省略

4.工程模式创建对象

工厂模式是一种众所周知的设计模式,广泛应用于软件工程领域,用于抽象创建特定对象的过程。

  1. function createPerson(name, age, job) { //创建函数,带有三个形参
  2. let o = new Object(); //在函数内部声明对象
  3. o.name = name; //调用函数时,将实参赋值给对象的属性
  4. o.age = age;
  5. o.job = job;
  6. o.sayName = function() { //定义对象方法
  7. console.log(this.name);
  8. };
  9. return o; //返回对象给函数
  10. }
  11. let person1 = createPerson("Nicholas", 29, "Software Engineer"); 将声明的对象赋值给变量
  12. let person2 = createPerson("Greg", 27, "Doctor");
  • 这里,函数 createPerson()接收 3 个参数,根据这几个参数构建了一个包含 Person 信息的对象。
  • 可以用不同的参数多次调用这个函数,每次都会返回包含 3 个属性和 1 个方法的对象。
  • 这种工厂模式虽 然可以解决创建多个类似对象的问题,但没有解决对象标识问题(即新创建的对象是什么类型)

5. 构造函数模式创建对象

构造函数

  • 构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
  • 构造函数的封装格式:
    1. function 构造函数名(形参1,形参2,形参3) {
    2. this.属性名1 = 参数1;
    3. this.属性名2 = 参数2;
    4. this.属性名3 = 参数3;
    5. this.方法名 = 函数体;
    6. }
    构造函数实例:
    1. function student(name,id,sex,grade){
    2. this.name=name;
    3. this.id=id;
    4. this.grade=grade;
    5. this.sayHi=function(){
    6. alert('你好我是'+this.name);
    7. }
    8. }

构造函数调用格式:

  1. var obj = new 构造函数名(实参1,实参2,实参3)
  2. let my=new student('姓名','学号','性别','年级');
  • 不能省略new
  • 构造函数首字母大写
  • 函数内的属性和方法前面需要添加this,表示当前对象的属性和方法。
  • 构造函数中不需要 return 返回结果。
  • 当我们创建对象的时候,必须用 new 来调用构造函数

new关键字的作用

  • 在构造函数代码开始执行之前,创建一个空对象;
  • 修改this的指向,把this指向创建出来的空对象;
  • 执行函数的代码
  • 在函数完成之后,返回this—-即创建出来的对象

构造函数内部的return

虽然构造函数不需要return返回结果,但构造函数中依然存在return
因为构造函数也是一个函数, 自然也可以有return语句, 不过和一般函数不太一样的是, 在构造函数中

  • 如果return的是一个对象, 则会直接返回这个对象,
  • 如果return的不是一个对象, 那在new时会忽略这个retrun, 转而返回this对象

注意: 如果不使用new命令, 此时构造函数是普通函数, 返回值的类型没有限制, 该是什么就是什么

6.2 对象的遍历

通过for-in循环显示对象的所有属性

  1. for (const propName in window) {
  2. document.write(propName);
  3. }
  4. for (var 变量 in 对象名){}
  5. console.log(变量) //输出变量里的 属性名
  6. console.log(对象名[变量]) //此时k为变量里的 属性值
  • 这个例子使用 for-in 循环显示了 BOM 对象 window 的所有属性。
  • 每次执行循环,都会给变量 propName 赋予一个 window 对象的属性作为值,直到 window 的所有属性都被枚举一遍。
  • 与 for 循环 一样,这里控制语句中的 const 也不是必需的。但为了确保这个局部变量不被修改,推荐使用 const。
  • ECMAScript 中对象的属性是无序的,因此 for-in 语句不能保证返回对象属性的顺序。换句话说,76 第 3 章 语言基础 所有可枚举的属性都会返回一次,但返回的顺序可能会因浏览器而异。
  • 如果 for-in 循环要迭代的变量是 null 或 undefined,则不执行循环体。

6.3 对象属性判断

通过if(key in obj)方法来判断对象内是否有指定的方法

  1. var colorObj = {
  2. 'black': printBlackBackground,
  3. 'red': printRedBackground,
  4. 'blue': printBlueBackground,
  5. 'green': printGreenBackground,
  6. 'yellow': printYellowBackground
  7. };
  8. if (color in colorObj) { //判断对象中是否有对应的属性名
  9. colorObj[color](); //有就打印出其对应的属性值
  10. }

3. 实例成员和静态成员

实例成员

就是构造函数内部通过this添加的成员 如下列代码中uname age sing 就是实例成员,实例成员只能通过实例化的对象来访问

  1. function Person(uname, age) {
  2. this.uname = uname;
  3. this.age = age;
  4. this.sing = function() {
  5. console.log('我会唱歌');
  6. }
  7. }
  8. var unknow = new Person('another', 18);
  9. console.log(unknow.uname);//实例成员只能通过实例化的对象来访问

静态成员

静态成员 在构造函数本身上添加的成员 如下列代码中 sex 就是静态成员,静态成员只能通过构造函数来访问

  1. function Person(uname, age) {
  2. this.uname = uname;
  3. this.age = age;
  4. this.sing = function() {
  5. console.log('我会唱歌');
  6. }
  7. }
  8. Person.sex = '男';
  9. var unknow = new Person('another', 18);
  10. console.log(Person.sex);//静态成员只能通过构造函数来访问