157 lines
3.8 KiB
Markdown
157 lines
3.8 KiB
Markdown
# 20191120
|
|
|
|
|
|
|
|
js 高级
|
|
|
|
怎样用面向对象的思想去编程 ---- 抽象
|
|
|
|
抽象
|
|
|
|
特指具体的某一个事物 ----- 对象
|
|
|
|
特征 ------- 属性
|
|
|
|
行为 ------- 方法
|
|
|
|
创建对象 方式
|
|
* 字面量创建对象
|
|
```js
|
|
var obj = {
|
|
name: 'yingbo',
|
|
age: 18,
|
|
sex: '女',
|
|
eat: () => {
|
|
console.log('真好吃')
|
|
},
|
|
run: () => {
|
|
console.log('跑的真快')
|
|
}
|
|
}
|
|
```
|
|
* 调用系统构造函数创建对象
|
|
```js
|
|
var obj1 = new Object()
|
|
object1.name = 'lisi'
|
|
object1.age = 20
|
|
object1.sex = '男'
|
|
object1.eat = () => {
|
|
console.log('好吃')
|
|
}
|
|
object.run = () => {
|
|
console.log('能跑个鬼')
|
|
}
|
|
```
|
|
* 自定义构造函数创建对象
|
|
```js
|
|
function Person(name, age, sex) {
|
|
this.name = name
|
|
this.age = age
|
|
this.sex = sex
|
|
this.eat = () => {
|
|
console.log('是非常好吃')
|
|
}
|
|
this.run = () => {
|
|
console.log('是非常能跑的怪物')
|
|
}
|
|
}
|
|
var per = new Person('yingbo', 20, 'male')
|
|
|
|
// 判断对象输入什么类型 instanceof
|
|
console.log(per instanceof Person) // boolean -> true
|
|
console.log(per instanceof Object) // boolean -> true always
|
|
```
|
|
* 姓名 年龄 性别 吃 ……
|
|
|
|
创建一个新的系统构造函数
|
|
```js
|
|
function Person(name, age, sex) {
|
|
this.name = name
|
|
this.age = age
|
|
this.sex = sex
|
|
this.sayHi = () =>{
|
|
console.log('你好')
|
|
}
|
|
}
|
|
```
|
|
|
|
实例化 ----- 通过自定义构造函数创建对象 ---> 实例对象
|
|
`var per = new Person('yingbo', 20, 'male')`
|
|
1. 开辟内存空间
|
|
2. 改变 this 的指向为当前对象
|
|
3. 设置对象的属性和方法值
|
|
4. 返回 this 指向的对象
|
|
|
|
自定义构造函数的缺点
|
|
|
|
内存消耗严重 数据不共享
|
|
```js
|
|
var per = new Person()
|
|
var per1 = new Person()
|
|
per.sayHi()
|
|
per1.sayHi()
|
|
console.log(per.sayHi == per1.sayHi) // -> false
|
|
```
|
|
```js
|
|
sayHi() => {
|
|
console.log('你好')
|
|
}
|
|
|
|
// sayHi = 'yingbo' -> 和上边的冲突 导致公共命名空间（全局变量）污染 下边定义的时候用的这个会报 not a function 的错误 但是可以解决不共享的问题 慎用
|
|
|
|
function Person(name, age, sex) {
|
|
this.name = name
|
|
this.age = age
|
|
this.sex = sex
|
|
this.sayHi = sayHi
|
|
}
|
|
|
|
var per = new Person()
|
|
var per1 = new Person()
|
|
per.sayHi()
|
|
per1.sayHi()
|
|
console.log(per.sayHi == per1.sayHi) // -> true
|
|
```
|
|
|
|
工厂模式创建对象
|
|
```js
|
|
function createObj(name, age) {
|
|
var obj = new Object()
|
|
obj.name = name
|
|
obj.age = age
|
|
obj.sayHi = () =>{
|
|
console.log('你好哇')
|
|
}
|
|
return obj
|
|
}
|
|
var obj1 = createObj()
|
|
obj1.sayHi()
|
|
```
|
|
|
|
工厂模式和自定义构造函数的区别 （面试的时候回答 相同 -> 不同）
|
|
* 共同点
|
|
* 都能创建对象
|
|
* 都是函数
|
|
* 都能传参数
|
|
* 不同点
|
|
* 函数名称大小写
|
|
* 有无返回值
|
|
* this -> 当前对象 (自定义) -> obj对象 (工厂)
|
|
* 是否需要new去实例化
|
|
* 函数内是否有new
|
|
|
|
* 实例对象和构造函数的关系
|
|
* 实例对象是通过构造函数创建的 ---- 实例化一个对象/new一个对象
|
|
* `console.dir()` 显示对象结构
|
|
* 实例对象的构造器(构造函数)
|
|
* `console.log(per.constructor == Person) // true` 实例对象的构造器是指向的是创建他的构造函数
|
|
* `console.log(per.constructor == Person.constructor) // false`
|
|
* `console.log(per.__proto__.constructor == Person.constructor) // false`
|
|
* `console.log(per.__proto__.constructor == Person.prototype.constructor) // true`
|
|
* `console.log(per.constructor == Person.prototype.constructor) // true`
|
|
* `Person.constructor` 指向的自己Person
|
|
|
|
* 总结
|
|
* 判断一个对象属于什么类型 实例对象 instanceof 构造函数
|
|
* 可以通过构造器去判断
|
|
|