JavaScript进阶

对象

声明对象

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

对象的'.'操作符

• 读取对象

coco.name
coco.describe

• 调用方法

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

• 设置属性值

coco.name = 'new coco';
// 输出："new coco"
coco.xxx = '给coco添加新属性xxx';

对象的'[]'操作符

注：和'.'操作符类似，但是'[]'操作符可以有表达式，

• 读取对象

coco.name
coco.describe

• 调用对象方法

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

• 设置属性值

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

删除属性

如果使用delete删除对象的属性, 那么它将在对象中被彻底删除

delete coco.describe
delete coco['age']

构造函数

function Company(name) {
  this.name = name;
}
// 设置对象方法showCompany
Company.prototype.showCompany = function() {
  console.log(this.name);
}
// new company对象
var coco = new Company('COCO');
// 调用对象方法
coco.showCompany();

// 输出：COCO

this

this 是函数中的隐含参数， 在javascript 中，this 指向函数执行时的当前对象

• 在严格模式下，this 的默认值为undefined

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

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

• 对象方法下，this 指向该方法所在的对象

var obj = {
  method: thisDemo  // 把函数挂在对象的属性上
};
// 用对象来调用这个方法
obj.method() === obj;
// 输出：true

this 改变

// 声明对象 Work
var Work = {
  money: 9999,
  goodJob: function() {
    return ++this.money;
  }
}
//  1. 调用 func();
var func = Work.goodJob;
func();
// 输出：NaN  
// 2. 直接用对象调用
Work.goodJob()
// 输出：10000  ()

注：输出NaN 的原因是func方法是在全局作用域下调用，this指向的是全局作用域，全局作用域下this.money是不存在，执行++操作，就是一个不存在的值NaN

• setTimeout 导致的this 指向变化

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

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

• 约定上使用self 占存 this (业务代码上也经常这样处理)

 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后输出）

原型

原型：

• 每个 javascript 函数都有prototype 属性，这个属性引用了一个对象，这个对象就是原型。
• 原型对象初始化的时候是空的，可以在里面定义任何属性和方法，这些方法和属性都将被该构造函数所创建的对象集成

构造函数

分析构造函数

// 创建Company构造函数
function Company(name) {
  this.name = name;
}
// 设置原型方法showCompany
Company.prototype.showCompany = function () {
  console.log(this.name);
}

// 用构造函数New出taobao对象
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 没有块级作用域

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

// 输出：
// 1
// 2
// 2

闭包