对象
一、对象类型的使用
创建方式
字面量
javascript
var person = {
name: 'Mocha',
age: 18,
height: 1.88,
intro: function () {
console.log(`name:${this.name}, age:${this.age}, height: ${this.height}`)
},
}
console.log(person.name) // Mocha
console.log(person.age) // 18
console.log(person.height) // 1.88
person.intro() // name:Mocha, age:18, height: 1.88new Object
javascript
var person = new Object()
person.name = 'Mocha'
person.age = 18
person.height = 1.88
person.intro = function () {
console.log(`name:${this.name}, age:${this.age}, height: ${this.height}`)
}
console.log(person.name) // Mocha
console.log(person.age) // 18
console.log(person.height) // 1.88
person.intro() // name:Mocha, age:18, height: 1.88new 其他类
javascript
function Person(name, age, height) {
this.name = name
this.age = age
this.height = height
this.intro = function () {
console.log(`name:${this.name}, age:${this.age}, height: ${this.height}`)
}
}
var person = new Person('Mocha', 18, 1.88)
console.log(person.name) // Mocha
console.log(person.age) // 18
console.log(person.height) // 1.88
person.intro() // name:Mocha, age:18, height: 1.88遍历方式
for 循环
javascript
var info = {
name: 'Mocha',
age: 18,
height: 1.88,
}
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}`)
}
// key:name,value:Mocha
// key:age,value:18
// key:height,value:1.88for in
javascript
var info = {
name: 'Mocha',
age: 18,
height: 1.88,
}
for (var key in info) {
console.log(`key:${key},value:${info[key]}`)
}
// key:name,value:Mocha
// key:age,value:18
// key:height,value:1.88二、值类型和引用类型
栈内存
原始类型占据的空间在栈内存中分配
javascript
// 值传递
var nickname = 'Mocha'
;(function sayHello(name) {
name = 'Latte'
})(nickname)
console.log(nickname) // Mocha// 值传递 var nickname = "Mocha"; (function sayHello(name) { name = "Latte" })(nickname) console.log(nickname) // Mocha堆内存
对象类型占据的空间在堆内存中分配
引用传递一
javascript
var info1 = {
nickname: 'Mocha',
}
;(function (obj) {
obj.nickname = 'Latte'
})(info1)
console.log(info1.nickname) // Latte引用传递二
javascript
var info2 = {
nickname: 'Mocha',
}
;(function (obj) {
obj = {
nickname: 'Latte',
}
})(info2)
console.log(info2.nickname) // Mocha三、函数的 this 指向
默认调用: this 指向 window
javascript
;(function foo() {
console.log(this)
})()
// Window {window: Window, self: Window, document: document, name: '', …}对象调用: this 指向调用的对象
javascript
var person = {
intro: function () {
console.log(this)
},
}
peroson.intro() // person -> {intro: f}四、工厂方法创建对象
工厂模式是一种设计模式,其实就是一种简单的函数,这个函数可以创建对象,为它添加属性和方法,最后返回这个对象。就像一个工厂一样,可以批量制作某种类型的对象。这种设计模式就是为了降低代码冗余。
javascript
function craeteStudent(name, age, height) {
var stu = {}
stu.name = name
stu.age = age
stu.height = height
stu.intro = function () {
console.log(`name: ${this.name}, age: ${this.age}, height: ${this.height}`)
}
return stu
}
var stu = craeteStudent('Mocha', 18, 1.88)
stu.intro() // name: Mocha, age: 18, height: 1.88五、构造函数创建对象
构造函数模式可以自定义引用类型,可以使用 new 关键字创建内置类型实例应用,创建自定义类型实例。
javascript
function Student(name, age, height) {
this.name = name
this.age = age
this.height = height
this.intro = function () {
console.log(`name: ${this.name}, age: ${this.age}, height: ${this.height}`)
}
}
var stu = new Student('Mocha', 18, 1.88)
stu.intro() // name: Mocha, age: 18, height: 1.88六、new 创建对象
如果一个函数被使用new操作符调用了,那么它会执行如下操作:
- 在内存中创建一个新的空对象
- 这个对象内部的
[[prototype]]属性会被赋值为该构造函数的prototype属性 - 构造函数内部的 this 会指向创建出来的新对象
- 执行函数内部代码
- 如果构造函数没有返回非空对象,则返回创建出来的新对象