對(duì)象

聲明對(duì)象

var coco = {
    name: 'COCO',
    describe: function() {
        return this.name +  ' start learning javascript!';
    }
};

對(duì)象的'.'操作符

• 讀取對(duì)象

coco.name
coco.describe

• 調(diào)用方法

coco.describe()
// 輸出："COCO start learning javascript!"

• 設(shè)置屬性值

coco.name = 'new coco';
// 輸出："new coco"
coco.xxx = '給coco添加新屬性xxx';

對(duì)象的'[]'操作符

注：和'.'操作符類似，但是'[]'操作符可以有表達(dá)式，

• 讀取對(duì)象

coco.name
coco.describe

• 調(diào)用對(duì)象方法

coco['describe']()
// 輸出："COCO start learning javascript!"

• 設(shè)置屬性值

coco['name']='new name';
// 輸出："new coco"
coco[5+5] = '我是5+5屬性的值';

刪除屬性

如果使用delete刪除對(duì)象的屬性, 那么它將在對(duì)象中被徹底刪除

delete coco.describe
delete coco['age']

構(gòu)造函數(shù)

function Company(name) {
  this.name = name;
}
// 設(shè)置對(duì)象方法showCompany
Company.prototype.showCompany = function() {
  console.log(this.name);
}
// new company對(duì)象
var coco = new Company('COCO');
// 調(diào)用對(duì)象方法
coco.showCompany();

// 輸出：COCO

this

this 是函數(shù)中的隱含參數(shù)， 在javascript 中，this 指向函數(shù)執(zhí)行時(shí)的當(dāng)前對(duì)象

• 在嚴(yán)格模式下，this 的默認(rèn)值為undefined

function thisDemo () {
  'use strict';
  return this;
}

thisDemo() === undefined
// 輸出：true

• 對(duì)象方法下，this 指向該方法所在的對(duì)象

var obj = {
  method: thisDemo  // 把函數(shù)掛在對(duì)象的屬性上
};
// 用對(duì)象來調(diào)用這個(gè)方法
obj.method() === obj;
// 輸出：true

this 改變

// 聲明對(duì)象 Work
var Work = {
  money: 9999,
  goodJob: function() {
    return ++this.money;
  }
}
//  1. 調(diào)用 func();
var func = Work.goodJob;
func();
// 輸出：NaN  
// 2. 直接用對(duì)象調(diào)用
Work.goodJob()
// 輸出：10000  ()

注：輸出NaN 的原因是func方法是在全局作用域下調(diào)用，this指向的是全局作用域，全局作用域下this.money是不存在，執(zhí)行++操作，就是一個(gè)不存在的值NaN

• setTimeout 導(dǎo)致的this 指向變化

 var Obj = {
  name: 'coco',
  showName: function() {
    console.log(this.name);
  },
  waitShowName: function() {
    this.showName();  // 1  this 指向Obj
    setTimeout(function() {
      this.showName(); // 2 這里的this 指向已經(jīng)變了， 不指向Obj 而是指向全局了
    }, 1000);
  }
}

Obj.waitShowName();
// 輸出：
// 1. coco 
// 2. undefined

• 約定上使用self 占存 this (業(yè)務(wù)代碼上也經(jīng)常這樣處理)

 var Obj = {
  name: 'coco',
  showName: function() {
    console.log(this.name);
  },
  waitShowName: function() {
    this.showName(); 
    var self = this;  // 使用self 占存 this
    setTimeout(function() {
      self.showName(); 
    }, 1000);
  }
}
// 輸出：
// 1. coco 
// 2. coco （過1s后輸出）

原型

原型：

• 每個(gè) javascript 函數(shù)都有prototype 屬性，這個(gè)屬性引用了一個(gè)對(duì)象，這個(gè)對(duì)象就是原型。
• 原型對(duì)象初始化的時(shí)候是空的，可以在里面定義任何屬性和方法，這些方法和屬性都將被該構(gòu)造函數(shù)所創(chuàng)建的對(duì)象集成

構(gòu)造函數(shù)

分析構(gòu)造函數(shù)

// 創(chuàng)建Company構(gòu)造函數(shù)
function Company(name) {
  this.name = name;
}
// 設(shè)置原型方法showCompany
Company.prototype.showCompany = function () {
  console.log(this.name);
}

// 用構(gòu)造函數(shù)New出taobao對(duì)象
var taobao = new Company('淘寶');
taobao.showCompany()
// 輸出：淘寶

原型鏈

function Company(name) {
  this.name = name;
}

Company.prototype.showCompany = function() {
  console.log(this.name);
}

function Alibaba(name) {
  this.name = name;
}

Alibaba.prototype = new Company();
Alibaba.prototype.constructor = Alibaba;
Alibaba.prototype.showCompany = function() {
  console.log('上市公司:' + this.name);
}

var alibaba = new Alibaba('阿里巴巴');
alibaba.showCompany();

var alipay = new Company('支付寶');
alipay.showCompany();

作用域

深入理解JavaScript的變量作用域

• JavaScript 的變量作用域是基于作用域鏈的
• JavaScript 沒有塊級(jí)作用域

// 
var a = '0';
function level1() {
  var a = '1'; // 作用域在函數(shù)
  function level2() {
    var a = '2';
    function level2a() {
      console.log(a);
    }
    console.log(a);
    level2a();
  }
  console.log(a);
  level2();
}
level1();

// 輸出：
// 1
// 2
// 2

閉包