认识对象类型

在数据类型中我们提到还有一种特别的类型：对象类型

• 对象类型涉及到JavaScript的各个方面，所以掌握对象类型非常重要
• 对象类型是一种存储键值对（key-value）的更复杂的数据类型

为什么需要对象类型呢？

基本数据类型可以存储一些简单的值，但是现实世界的事物抽象成程序时，往往比较复杂

比如一个人，有自己的特性（比如姓名、年龄、身高），有一些行为（比如跑步、学习、工作）

比如一辆车，有自己的特性（比如颜色、重量、速度），有一些行为（比如行驶）

这个时候，我们需要一种新的类型将这些特性和行为组织在一起，这种类型就是对象类型

• 对象类型可以使用{…}来创建的复杂类型，里面包含的是键值对（“key: value”）
• 键值对可以是属性和方法（在对象中的函数称之为方法）
• 其中key是字符串（也叫做属性名property name ，ES6之后也可以是Symbol类型，后续学习
• 其中value可以是任意类型，包括基本数据类型、函数类型、对象类型等

/*
      两个术语: 函数/方法
         函数(function): 如果在JavaScript代码中通过function默认定义一个结构, 称之为是函数.
         方法(method): 如果将一个函数放到对象中, 作为对象的一个属性, 那么将这个函数称之为方法.
*/
function foo() {
}

// key: 字符串类型, 但是在定义对象的属性名时, 大部分情况下引号都是可以省略的
var person = {
    // key: value
    name: "why",
    age: 18,
    height: 1.88,
    "my friend": {
        name: "kobe",
        age: 30
    },
    run: function() {
        console.log("running")
    },
    eat: function() {
        console.log("eat foods")
    },
    study: function() {
        console.log("studying")
    }
}

创建对象和使用对象

对象的创建方法有很多，包括三种：

• 对象字面量（Object Literal）：通过{}
• new Object+动态添加属性
• new 其他类

// 1.对象字面量
var obj1 = {
    name: "why"
}

// 2.new Object()
// // Object构造函数
var obj2 = new Object()
obj2.name = "kobe"

// // 3.new 其他类()
function Person() {}
var obj3 = new Person()

目前我们主要掌握对象字面量的方式，后续我们学习其他两种方式

属性之间是以逗号（ comma ）分割的

对象的使用过程包括如下操作：

• 访问对象的属性
• 修改对象的属性
• 添加对象的属性
• 删除对象的属性

// 1.定义了一个对象
var info = {
    name: "why",
    age: 18,
    friend: {
        name: "kobe",
        age: 30
    },
    running: function() {
        console.log("running~")
    }
}

// 2.访问对象中的属性
console.log(info.name)
console.log(info.friend.name)
info.running()

// 3.修改对象中的属性
info.age = 25
info.running = function() {
    alert("I am running~")
}
console.log(info.age)
info.running()

// 4.添加对象中的属性
info.height = 1.88
info.studying = function() {
    console.log("I am studying~")
}
console.log(info)

// 5.删除对象中的属性
// delete关键字(操作符)
delete info.age
delete info.height
console.log(info)

方括号和引用的使用

为什么需要使用方括号呢？

对于多次属性来说，JavaScript是无法理解的

// 无法理解的属性
info.good friend = "why"

这是因为点符号要求 key 是有效的变量标识符

• 不包含空格，不以数字开头，也不包含特殊字符（允许使用 $ 和 _）

这个时候我们可以使用方括号：

方括号运行我们在定义或者操作属性时更加的灵活

var obj = {
    name: "why",
    "my friend": "kobe",
    "eating something": function() {
        console.log("eating~")
    }
}

console.log(obj["my friend"])
console.log(obj.name)
console.log(obj["name"])

// obj["eating something"]()
var eatKey = "eating something"
obj[eatKey]()

对象的练习

// 定义商品对象
var product = {
    name: "鞋子",
    desc: "鞋子非常棒!!!",
    price: 99,
    brand: "nike"
}

// 定义手机对象
var phone = {
    name: "iPhone 13 Pro Max",
    desc: "对iPhone的描述信息",
    price: 888,
    callPhone: function(phoneNum) {
        console.log("打电话给某人:", phoneNum)
    },
    playGame: function(gameName) {
        console.log("玩游戏:", gameName)
    }
}

// 定义用户对象
var user = {
    id: 1111111,
    account: "coderwhy",
    nickname: "coderwhy",
    password: "xxx123",
    avatarURL: "图片地址",
    role: {
        id: 110,
        name: "管理员",
        createTime: "2033-03-03"
    }
}

对象的遍历

对象的遍历（迭代）：表示获取对象中所有的属性和方法

• Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组

遍历方式一：普通for循环

遍历方式二：for in 遍历方法

var info = {
    name: "why",
    age: 18,
    height: 1.88
}

// console.log(Object.keys(info))

// 对对象进行遍历
// 1.普通for循环
var infoKeys = Object.keys(info)
for (var i = 0; i < infoKeys.length; i++) {
    var key = infoKeys[i]
    var value = info[key]
    console.log(`key: ${key}, value: ${value}`)
}

// 2.for..in..: 遍历对象
for (var key in info) {
    var value = info[key]
    console.log(`key: ${key}, value: ${value}`)
}

// 对象不支持:  for..of..: 默认是不能遍历对象
// for (var foo of info) {
// }

栈内存和堆内存

我们知道程序是需要加载到内存中来执行的，我们可以将内存划分为两个区域：栈内存和堆内存

• 原始类型占据的空间是在栈内存中分配的
• 对象类型占据的空间是在堆内存中分配的

值类型和引用类型

原始类型的保存方式：在变量中保存的是值本身，所以原始类型也被称之为值类型

对象类型的保存方式：在变量中保存的是对象的“引用”，所以对象类型也被称之为引用类型

思考下面的现象

var num1 = 123
var num2 = 123
console.log(num1 === num2) // true

// 1.现象一: 两个对象的比较
var obj1 = {}
var obj2 = {}
console.log(obj1 === obj2) // false

它们在内存中的表现是下面这样，两个对象的内存地址不一样，所以返回false

// 2.现象二: 引用的赋值
var info = {
    name: "why",
    friend: {
        name: "kobe"
    }
}

var friend = info.friend
friend.name = "james"
console.log(info.friend.name) // james

上面的代码在内存中的表现如下：

// 3.现象三: 值传递
function foo(a) {
    a = 200
}
var num = 100
foo(num)
console.log(num) // 100

执行foo(num)，将num的值赋值给a，自始至终num都没有改变

// 4.现象四: 引用传递, 但是在函数中创建了一个新对象, 没有对传入对象进行修改
function foo(a) {
    a = {
        name: "why"
    }

}
var obj = {
    name: "obj" 
}
foo(obj)
console.log(obj) // { name: "obj" }

// 5.现象五: 引用传递, 但是对传入的对象进行修改
function foo(a) {
    a.name = "why"
}

var obj = {
    name: "obj"
}
foo(obj)
console.log(obj) // { name: "why" }

为什么需要this？

在常见的编程语言中，几乎都有this这个关键字（Objective-C中使用的是self），但是JavaScript中的this和常见的面向对象 语言中的this不太一样：

• 常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中
• 也就是你需要有一个类，类中的方法（特别是实例方法）中，this代表的是当前调用对象

但是JavaScript中的this更加灵活，无论是它出现的位置还是它代表的含义

我们来看一下编写一个obj的对象，有this和没有this的区别：

有this的情况

var info = {
    name: "why",
    age: 18,
    running: function() {
        console.log("running~", this.name)
    },
    eating: function() {
        console.log("eating~", this.name)
    },
    studying: function() {
        console.log("studying~", this.name)
    }
}

info.running()
info.eating()
info.studying()

没有this的情况

var info = {
    name: "why",
    age: 18,
    running: function() {
        console.log("running~", info.name)
    },
    eating: function() {
        console.log("eating~", info.name)
    },
    studying: function() {
        console.log("studying~", info.name)
    }
}

info.running()
info.eating()
info.studying()

this指向什么？

目前掌握两个this的判断方法：

• 在全局环境下面，this指向window

// 函数中是有一个this的变量, this变量在大多数情况下会指向一个对象
// arguments保存的是传入的所有参数

// 情况一: 如果普通的函数被默认调用, 那么this指向的就是window
function foo(name, age) {
    console.log(arguments)
    console.log(this) // window
}
foo("abc", 123)

• 通过对象调用，this指向调用的对象

// 情况二: 如果函数它是被某一个对象来引用并且调用它, 那么this会指向这个对象(调用的那个调用)
var obj = {
    name: "why",
    running: function() {
        console.log(this) // obj
        console.log(obj)
        console.log(this === obj) // true
    }
}
obj.running()

考验题目

题目一：

var obj = {
    name: "why",
    running: function() {
        console.log(this) // window
    }
}

var fn = obj.running
fn()

题目二：

function bar() {
    console.log(this) // obj对象
}
var obj = {
    name: "why",
    bar: bar
}
obj.bar()

后续我们还会学习其他，也会给大家总结this的规律

类和对象的思维方式

我们来思考一个问题：如果需要在开发中创建一系列的相似的对象，我们应该如何操作呢？

比如下面的例子：

• 游戏中创建一系列的英雄（英雄具备的特性是相似的，比如都有名字、技能、价格，但是具体的值又不相同）
• 学生系统中创建一系列的学生（学生都有学号、姓名、年龄等，但是具体的值又不相同）

当然，一种办法是我们创建一系列的对象：

// 一系列的学生对象
// 重复代码的复用: for/函数
var stu1 = {
    name: "why",
    age: 18,
    height: 1.88,
    running: function() {
        console.log("running~")
    }
}
var stu2 = {
    name: "kobe",
    age: 30,
    height: 1.98,
    running: function() {
        console.log("running~")
    }
}
var stu3 = {
    name: "james",
    age: 25,
    height: 2.05,
    running: function() {
        console.log("running~")
    }
}

这种方式有一个很大的弊端：创建同样的对象时，需要编写重复的代码

我们是否有可以批量创建对象，但是又让它们的属性不一样呢？

创建对象的方案 – 工厂函数

我们可以想到的一种创建对象的方式：工厂函数

• 我们可以封装一个函数，这个函数用于帮助我们创建一个对象，我们只需要重复调用这个函数即可
• 工厂模式其实是一种常见的设计模式

// 工厂函数(工厂生产student对象) -> 一种设计模式
// 通过工厂设计模式, 自己来定义了一个这样的函数
function createStudent(name, age, height) {
    var stu = {}
    stu.name = name
    stu.age = age
    stu.height = height
    stu.running = function() {
        console.log("running~")
    }
    return stu
}

var stu1 = createStudent("why", 18, 1.88)
var stu2 = createStudent("kobe", 30, 1.98)
var stu3 = createStudent("james", 25, 2.05)
console.log(stu1) // Object
console.log(stu2) // Object
console.log(stu3) // Object

认识构造函数

工厂方法创建对象有一个比较大的问题：我们在打印对象时，对象的类型都是Object类型

• 但是从某些角度来说，这些对象应该有一个他们共同的类型
• 下面我们来看一下另外一种模式：构造函数的方式

我们先理解什么是构造函数？

• 构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数
• 在其他面向的编程语言里面，构造函数是存在于类中的一个方法，称之为构造方法
• 但是JavaScript中的构造函数有点不太一样，构造函数扮演了其他语言中类的角色

也就是在JavaScript中，构造函数其实就是类的扮演者：

• 比如系统默认给我们提供的Date就是一个构造函数，也可以看成是一个类
• 在ES5之前，我们都是通过function来声明一个构造函数（类）的，之后通过new关键字来对其进行调用
• 在ES6之后，JavaScript可以像别的语言一样，通过class来声明一个类

那么类和对象到底是什么关系呢？

类和对象的关系

那么什么是类（构造函数）呢？

• 现实生活中往往是根据一份描述/一个模板来创建一个实体对象的
• 编程语言也是一样, 也必须先有一份描述, 在这份描述中说明将来创建出来的对象有哪些属性(成员变量)和行为(成员方法)

比如现实生活中，我们会如此来描述一些事物：

• 比如水果fruits是一类事物的统称，苹果、橘子、葡萄等是具体的对象
• 比如人person是一类事物的统称，而Jim、Lucy、Lily、李雷、韩梅梅是具体的对象

JavaScript中的类（ES5）

我们前面说过，在JavaScript中类的表示形式就是构造函数

JavaScript中的构造函数是怎么样的？

• 构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别
• 那么如果这么一个普通的函数被使用new操作符来调用了，那么这个函数就称之为是一个构造函数

如果一个函数被使用new操作符调用了，那么它会执行如下操作：

• 在内存中创建一个新的对象（空对象）
• 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；（后面详细讲）
• 构造函数内部的this，会指向创建出来的新对象
• 执行函数的内部代码（函数体代码）
• 如果构造函数没有返回非空对象，则返回创建出来的新对象

接下来，我们可以用构造函数的方式来实现一下批量创建学生

创建对象的方案 – 构造函数（类）

我们来通过构造函数实现一下：

// JavaScript已经默认提供给了我们可以更加符合JavaScript思维方式(面向对象的思维方式)的一种创建对象的规则
// 在函数中的this一般指向某一个对象
/*
      如果一个函数被new操作符调用
        1.创建出来一个新的空对象
        2.让this指向这个空对象
        3.执行函数体的代码块
        4.如果没有明确的返回一个非空对象, 那么this指向的对象会自动返回
*/
function coder(name, age, height) {
    this.name = name
    this.age = age
    this.height = height
    this.running = function() {
        console.log("running~")
    }
}

// 在函数调用的前面加 new 关键字(操作符)
var stu1 = new coder("why", 18, 1.88)
var stu2 = new coder("kobe", 30, 1.98)
console.log(stu1, stu2)

这个构造函数可以确保我们的对象是有coder的类型的（实际是constructor的属性，这个我们后续再探讨）

事实上构造函数还有很多其他的特性：

• 比如原型、原型链、实现继承的方案
• 比如ES6中类、继承的实现

额外补充

构造函数的补充

// 创建一系列的对象
// 构造函数的名称: 使用大驼峰
function Person() {

}

var p1 = new Person()
console.log(p1)

// 平时创建普通的对象
// new Object()
var obj1 = {}
var obj2 = new Object()
var obj3 = new Person()

// 普通函数: 使用小驼峰
function sayHello() {

}

全局对象window

// 浏览器中存在一个全局对象object -> window
// 作用一: 查找变量时, 最终会找到window头上
// 作用二: 将一些浏览器全局提供给我们的变量/函数/对象, 放在window对象上面
// 作用三(了解): 使用var定义的变量会被默认添加到window上面
console.log(window)

// 使用var定义变量
var message = "Hello World"

function foo() {
    // 自己的作用域
    // abc()
    // alert("Hello World")
    console.log(window.console === console) // true

    // 创建一个对象
    // var obj = new Object()
    console.log(window.Object === Object) // true

    // DOM
    console.log(document)

    // window.message
    console.log(window.message) // Hello World
}
foo()

函数也是对象

// 定义原始类型的变量
var name = "why"
var age = 18

// 定义对象类型的变量
// 地址 - 指针 - 引用
var obj = {} // 堆内存
var foo = function() {} // 堆内存
function bar() {} // 堆内存

console.log(typeof obj) // object
console.log(typeof foo) // function -> object

// var stu = new Student() // stu是一个Student -> Person

// 引申一些别的知识(了解)
var info = {}
info.name = "abc"

function sayHello() {
}
sayHello.age = 18
console.log(sayHello.age) // 18

function Dog() {

}
// 构造函数上(类上面)添加的函数, 称之为类方法
Dog.running = function() {}
Dog.running()