前端-JS学习笔记-面向对象

字面量创建对象，对象的遍历，堆内存，值类型，引用类型

1. 认识对象类型

• 在数据类型中还有一种特别的类型：对象类型

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

• 为什么需要对象类型呢?

  • 基本数据类型可以存储一些简单的值，但是现实世界的事物抽象成程序时，往往比较复杂
  • 比如一个人，有自己的特性(比如姓名、年龄、身高)，有一些行为(比如跑步、学习、工作)
  • 比如一辆车，有自己的特性(比如颜色、重量、速度)，有一些行为(比如行驶)

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

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

2. 创建对象和使用对象

2.1. 对象的创建方法

2.1.1. 对象字面量

• 通过{}

• 属性之间是以逗号( comma )分割的

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

2.1.2. new Object()

• 动态添加属性

var info2 = new Object();
info2.name = "john";

2.1.3. new 其他类()

class Person {
  constructor(name){
    this.name = name;
  }
}
var person = new Person("amy");
console.log(person.name);

2.2. 对象的使用过程

2.2.1. 访问对象的属性

var info = {
  name: "why",
  age: 18
}
console.log(info.name);

2.2.2. 修改对象的属性

var info = {
  name: "why",
  age: 18
}
info.name = "Hello";

2.2.3. 添加对象的属性

var info = {
  name: "why",
  age: 18
}
info.height = 1.98;
info.address = "洛杉矶";

2.2.4. 删除对象的属性

• delete操作符

var info = {
  name: "why",
  age: 18
}
delete info.age;

3. 函数/方法

• 函数(function)：如果在JavaScript代码中通过function默认定义一个结构时，称之为函数
• 方法(method)：如果将一个函数放到对象中，作为对象的一个属性，那么将这个函数称之为方法

4. 方括号和引用的使用

• key是字符串类型，但是在定义对象的属性时，大部分情况下引号都是可以省略的

  var info = {
    "name": "why"
  }

  等同于

  var info = {
    name: "why"
  }

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

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

    info.good freind = "why";

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

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

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

  var message = "Hello World";
  var info = {
    "good friend": "why",
    [message]: "你好"
  }
  console.log(info["good friend"]);
  console.log(info[message]);

5. 对象的遍历

• 表示获取对象中所有的属性和方法

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

5.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}`);
}

5.2. for/in遍历方法

for (var key in info) {
  var value = info[key];
  console.log(`key: ${key}, value: ${value}`);
}

6. 栈内存和堆内存

• 程序是需要加载到内存中来执行的，将内存划分为两个区域：栈内存和堆内存
  • 原始类型占据的空间是在栈内存中分配的
  • 对象类型占据的空间是在堆内存中分配的

7. 值类型和引用类型

7.1. 原始类型

• 在变量中保存的是值本身

• 所以原始类型也被称之为值类型

7.2. 对象类型

• 在变量中保存的是对象的“引用”

• 所以对象类型也被称之为引用类型

7.3. 两个对象的比较

• 是对象就会在堆内存中创建新的空间，a，b中保存的就是不同的堆内存空间地址

var a = {};
var b = {};
// false
console.log(a === b);

7.4. 引用赋值

• 对于 friend变量，作为对象类型它指向info.friend指向的内存地址

var info = {
  name: "why",
  friend: {
    name: "kobe"
  }
}
var friend = info.friend;
friend.name = "james";
// james
console.log(info.friend.name);

7.5. 值传递

• 函数中传入x的值后，和原始的x没有了关系

function bar(a){
  a *= 2;
}
var x = 2;
bar(x);
// 2
console.log(x);

7.6. 引用传递-新对象

• 函数中传入的是对象所指的地址值，但是函数内部改变了地址指向新的内存地址

  

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

7.7. 引用传递-改变变量值

• 函数中传入的是对象所指的地址值，地址值所指内存中变量值改变同样影响原对象obj

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