对象
声明对象
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
