目录
1_对象类型object
1.1_认识
1)对象类型是一种存储键值对(key-value)的更复杂的数据类型;
2) 键值对可以是属性和方法(在对象中的函数称之为方法);
3) key是字符串(ES6之后也可以是Symbol类型,后续学习);
4) 补充:key一般是个英文单词,如果是多个英文单词,以空格间隔,必须在首尾加双引号。比如 “fist price”:199;
5) 其中value可以是任意类型,包括基本数据类型、函数类型、对象类型等;
1.2_对象的创建和使用
创建对象的三种方法:
1 )对象字面量(Object Literal):通过{}
创建,属性一般之间以逗号,
分隔,也可以省略逗号。
2)new Object+动态添加属性;
3)new 其他类;
<script>
// 方法1.对象字面量 。 创建对象首先掌握第一种方法
var obj1 = {
name: "xixi"
age: 18
}
// 方法2. new Object()
// // Object构造函数
// var obj2 = new Object()
// obj2.name = "haha"
//方法3. new 其他类()
// function Person() {}
// var obj3 = new Person()
</script>
对象的使用操作
-
访问对象的属性:对象名
.
属性名。若访问方法,还要加() -
更改对象的属性:对象名
.
属性名=
新属性值 -
添加对象的属性:对象名
.
新属性名=
新属性值 -
删除对象的属性:
delete
对象名.
属性名
<script>
// 1.定义一个对象
var info = {
name: "xixi",
age: 18,
friend: {
name: "haha",
age: 20
},
running: function() {
console.log("running~")
}
}
// 2.访问对象中的属性
console.log(info.name)
console.log(info.friend.name)
info.running()
// 3.修改对象中的属性
info.age = 25
info.running = function() {
alert("I am running~")
}
console.log(info.age)
info.running()
// 4.添加对象中的属性
info.height = 1.88
info.studying = function() {
console.log("I am studying~")
}
console.log(info)
// 5.删除对象中的属性
// delete关键字(操作符)
delete info.age
delete info.height
console.log(info)
</script>
1.3_方括号和引用的使用
使用方括号的原因, 对于多次属性来说,JavaScript引擎是无法理解的。
这是因为点符号.
要求 key 是有效的变量标识符: 不包含空格,不以数字开头,也不包含特殊字符(允许使用 $ 和 _);
方括号,运行在定义或者操作属性时,更加的灵活;
<script>
var obj = {
name: "xixi",
"my friend": "haha",
"eating something": function() {
console.log("eating~")
}
}
console.log(obj["my friend"])
console.log(obj.name)
console.log(obj["name"])
// obj["eating something"]()
var eatKey = "eating something"
obj[eatKey]()
</script>
1.4_对象的遍历
对象的遍历(迭代):表示获取对象中所有的属性和方法。
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组;
-
遍历方式一:普通for循环
-
遍历方式二:for in 遍历方法 (更推荐)
<script>
var info = {
name: "xixi",
age: 18,
height: 1.88
}
// console.log(Object.keys(info))
// 对对象进行遍历
// 1.普通for循环
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}`)
}
// 2.for..in..: 遍历对象
for (var key in info) {
var value = info[key]
console.log(`key: ${key}, value: ${value}`)
}
// 对象不支持: for..of..: 默认是不能遍历对象
// for (var foo of info) {
// }
</script>
2_值类型和引用类型
程序是加载到内存中来执行的,将内存划分为两个区域:栈内存和堆内存
-
原始类型占据的空间是在栈内存中分配的,在变量中保存的是值本身,也被称之为值类型;
-
对象类型占据的空间是在堆内存中分配的,在变量中保存的是对象的“引用”(堆内存的地址), 也被称之为引用类型;
3_函数的this
常见的编程语言中,有this这个关键字(除Objective-C中使用的是self),但JavaScript中的this和常见的面向对象语言中的this不一样:
- 常见面向对象的编程语言中,比如Java、C++、Swift、Dart等等一系列语言中,this通常只会出现在类的方法中(特别是实例方法)中,this代表的是当前调用对象;
- JS中的this更加灵活,尤其是出现的位置还有它代表的含义
掌握两个this的判断方法:
- 在全局环境下面,this指向window;
- 通过对象类型调用,this指向调用的对象;
<script>
// 函数中是有一个this的变量, this变量在大多数情况下会指向一个对象
// arguments保存的是传入的所有参数
// 情况一: 如果普通的函数被默认调用, 那么this指向的就是window
// function foo(name, age) {
// console.log(arguments)
// console.log(this) //指向windows
// }
// foo("abc", 123)
// function sayHello(name) {
// console.log(this) //指向windows
// }
// sayHello()
// 情况二: 如果函数它是被某一个对象来引用并且调用它, 那么this会指向这个对象
// var obj = {
// name: "hihi",
// running: function() {
// console.log(this)
// // console.log(obj)
// // console.log(this === obj)
// }
// }
// obj.running() //指向obj对象
// 1.题目一:
// var fn = obj.running
// fn() // 指向window ,不是由对象主动调用
// 2.题目二:
function bar() {
console.log(this)
}
var obj = {
name: "hihi",
bar: bar
}
obj.bar() //指向obj对象
</script>
4_构造函数
4.1_类和对象的思维方式
在开发中创建一系列的相似的对象,比如游戏中创建一系列的英雄(英雄具备的特性是相似的,都有名字、技能、价格,但是具体的值又不相同);学生系统中创建一系列的学生(学生都有学号、姓名、年龄等,但是具体的值又不相同)。
现实生活中往往是根据一份描述/一个模板来创建一个实体对象的;编程语言也是一样, 也必须先有一份描述, 在这份描述中说明将来创建出来的对象有哪些属性(成员变量)和行为(成员方法)。
创建同类的对象时,需要编写重复的代码。为了解决批量创建对象,同时让各自的属性不一样,解决方案——工厂函数。
创建对象的方案—— 工厂函数:封装一个函数,用于帮助创建一个对象,只需要重复调用这个函数即可。工厂模式也是一种常见的设计模式;
<script>
// 工厂函数(工厂生产student对象) -> 一种设计模式
// 通过工厂设计模式, 自己来定义了一个这样的函数
function createStudent(name, age, height) {
var stu = {}
stu.name = name
stu.age = age
stu.height = height
stu.running = function() {
console.log("running~")
}
return stu
}
var stu1 = createStudent("xixi", 18, 1.88)
var stu2 = createStudent("haha", 30, 1.98)
var stu3 = createStudent("james", 25, 2.05)
console.log(stu1)
console.log(stu2)
console.log(stu3)
</script>
4.2_认识构造函数
工厂方法创建对象有一个比较大的问题:打印对象时,对象的类型都是Object类型,但是从某些角度来说,这些对象应该有一个共同的类型。
创建对象另一种模式:构造函数
-
常在创建对象时会调用的函数;
-
在其他面向对象的编程语言中,构造函数是存在于类中的一个方法,称之为构造方法;
-
但是JavaScript中的构造函数不太一样,构造函数扮演了其他语言中类的角色;
在JavaScript中,构造函数就是类的扮演者:
-
比如系统默认提供的Date就是一个构造函数,也可以看成是一个类;
-
在ES5之前,都是通过function来声明一个构造函数(类)的,之后通过new关键字来对其进行调用;
-
在ES6之后,JavaScript可以像别的语言一样,通过class来声明一个类;
事实上构造函数还有其他的特性:
-
比如原型、原型链、实现继承的方案
-
比如ES6中类、继承的实现
4.3_JavaScript中的类(ES5)
在JavaScript中类的表示形式就是构造函数。
-
构造函数是一个普通的函数,从表现形式来说,和千千万万个普通的函数没有任何区别;
-
如果一个普通的函数被使用new操作符来调用了,那么这个函数就是一个构造函数;
一个函数被使用new操作符调用了,会执行以下操作:
-
在内存中创建一个新的对象(空对象);
-
这个对象内部的属性会被赋值为该构造函数的属性(new的实参传给构造函数的形参,形参传给对象内部属性);
-
构造函数内部的this,会指向创建出来的新对象;
-
执行函数的内部代码(函数体代码);
-
如果构造函数没有返回非空对象,则返回创建出来的新对象;
<script>
// JavaScript已经默认提供更加符合JavaScript思维方式(面向对象的思维方式)的一种创建对象的规则
// 在函数中的this一般指向某一个对象
/*
如果一个函数被new操作符调用
1.创建出来一个新的空对象
2.让this指向这个空对象
3.执行函数体的代码块
4.如果没有明确的返回一个非空对象, 那么this指向的对象会自动返回
*/
function coder(name, age, height) {
this.name = name
this.age = age
this.height = height
this.running = function() {
console.log("running~")
}
}
// 在函数调用的前面加 new 关键字(操作符)
var stu1 = new coder("xixi", 18, 1.88)
var stu2 = new coder("kobe", 30, 1.98)
console.log(stu1, stu2)
</script>