js對象詳解

為什么要有對象

function printPerson(name, age, sex....) {
}
// 函數的參數如果特別多的話，可以使用對象簡化
function printPerson(person) {
  console.log(person.name);
  ……
}

什么是對象

現實生活中：萬物皆對象，對象是一個具體的事物，一個具體的事物就會有行為和特征。
舉例： 一部車，一個手機
車是一類事物，門口停的那輛車才是對象
 特征：紅色、四個輪子
 行為：駕駛、剎車

JavaScript中的對象

JavaScript中的對象其實就是生活中對象的一個抽象
JavaScript的對象是無序屬性的集合。
 其屬性可以包含基本值、對象或函數。對象就是一組沒有順序的值。我們可以把JavaScript中的對象想象成鍵值對，其中值可以是數據和函數。
對象的行為和特征
 特征---屬性
 行為---方法

• 事物的特征在對象中用屬性來表示。

• 事物的行為在對象中用方法來表示。

對象字面量

字面量：11 'abc' true [] {}等

var o = {
  name: 'zs,
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
 }
};

思考：

如何把學生對象、老師對象、英雄對象改寫成字面量的方式

對象創建方式

• 對象字面量

var o = {
  name: 'zs',
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
 }
};   

• new Object()創建對象

var person = new Object();
  person.name = 'lisi';
  person.age = 35;
  person.job = 'actor';
  person.sayHi = function(){
  console.log('Hello,everyBody');
}

• 工廠函數創建對象

function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everyBody');
 }
  return person;
}
var p1 = createPerson('張三', 22, 'actor');

• 自定義構造函數

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
  console.log('Hello,everyBody');
 }
}
var p1 = new Person('張三', 22, 'actor');

屬性和方法

如果一個變量屬於一個對象所有，那么該變量就可以稱之為該對象的一個屬性，屬性一般是名詞，用來描述事物的特征
如果一個函數屬於一個對象所有，那么該函數就可以稱之為該對象的一個方法，方法是動詞，描述事物的行為和功能

new關鍵字

構造函數 ，是一種特殊的函數。主要用來在創建對象時初始化對象， 即為對象成員變量賦初始值，總與new運算符一起使用在創建對象的語句中。

1. 構造函數用於創建一類對象，首字母要大寫。

2. 構造函數要和new一起使用才有意義。

new在執行時會做四件事情

new會在內存中創建一個新的空對象
new 會讓this指向這個新的對象
執行構造函數 目的：給這個新對象加屬性和方法
new會返回這個新對象

this詳解

JavaScript中的this指向問題，有時候會讓人難以捉摸，隨着學習的深入，我們可以逐漸了解
現在我們需要掌握函數內部的this幾個特點
 1. 函數在定義的時候this是不確定的，只有在調用的時候才可以確定
 2. 一般函數直接執行，內部this指向全局window
 3. 函數作為一個對象的方法，被該對象所調用，那么this指向的是該對象
 4. 構造函數中的this其實是一個隱式對象，類似一個初始化的模型，所有方法和屬性都掛載到了這個隱式對象身上，后續通過new關鍵字來調用，從而實現實例化

對象的使用

遍歷對象的屬性

通過for..in語法可以遍歷一個對象

var obj = {};
for (var i = 0; i < 10; i++) {
  obj[i] = i * 2;
}
for(var key in obj) {
  console.log(key + "==" + obj[key]);
}

刪除對象的屬性

function fun() { 
  this.name = 'mm';
}
var obj = new fun(); 
console.log(obj.name); // mm 
delete obj.name;
console.log(obj.name); // undefined

簡單類型和復雜類型的區別

基本類型又叫做值類型，復雜類型又叫做引用類型

值類型：簡單數據類型，基本數據類型，在存儲時，變量中存儲的是值本身，因此叫做值類型。

引用類型：復雜數據類型，在存儲是，變量中存儲的僅僅是地址（引用），因此叫做引用數據類型。

• 堆和棧

  堆棧空間分配區別：
  　　1、棧（操作系統）：由操作系統自動分配釋放 ，存放函數的參數值，局部變量的值等。其操作方式類似於數據結構中的棧；
  　　2、堆（操作系統）： 存儲復雜類型(對象)，一般由程序員分配釋放， 若程序員不釋放，由垃圾回收機制回收，分配方式倒是類似於鏈表。

• 注意：JavaScript中沒有堆和棧的概念，此處我們用堆和棧來講解，目的方便理解和方便以后的學習。

 

基本類型在內存中的存儲

復雜類型在內存中的存儲

基本類型作為函數的參數

復雜類型作為函數的參數

// 下面代碼輸出的結果
function Person(name,age,salary) {
  this.name = name;
  this.age = age;
  this.salary = salary;
}
function f1(person) {
  person.name = "ls";
  person = new Person("aa",18,10);
}
​
var p = new Person("zs",18,1000);
console.log(p.name);
f1(p);
console.log(p.name);

思考：

//1. 
var num1 = 10;
var num2 = num1;
num1 = 20;
console.log(num1);
console.log(num2);
​
//2. 
var num = 50;
function f1(num) {
    num = 60;
    console.log(num);
}
f1(num);
console.log(num);
​
//3. 
var num1 = 55;
var num2 = 66;
function f1(num, num1) {
  num = 100;
  num1 = 100;
  num2 = 100;
  console.log(num);
  console.log(num1);
  console.log(num2);
}
​
f1(num1, num2);
console.log(num1);
console.log(num2);
console.log(num);