Skip to content

对象 ​

一、对象类型的使用 ​

创建方式 ​

字面量

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.88

new 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.88

new 其他类

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.88

for 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操作符调用了,那么它会执行如下操作:

  1. 在内存中创建一个新的空对象
  2. 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性
  3. 构造函数内部的 this 会指向创建出来的新对象
  4. 执行函数内部代码
  5. 如果构造函数没有返回非空对象,则返回创建出来的新对象