20191120

js 高级

怎样用面向对象的思想去编程 ---- 抽象

抽象

特指具体的某一个事物 ----- 对象

特征 ------- 属性

行为 ------- 方法

创建对象方式

字面量创建对象

var obj = {
  name: 'yingbo',
  age: 18,
  sex: '女',
  eat: () => {
    console.log('真好吃')
  },
  run: () => {
    console.log('跑的真快')
  }
}

调用系统构造函数创建对象

var obj1 = new Object()
object1.name = 'lisi'
object1.age = 20
object1.sex = '男'
object1.eat = () => {
  console.log('好吃')
}
object.run = () => {
  console.log('能跑个鬼')
}

自定义构造函数创建对象

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

姓名年龄性别吃 ……

创建一个新的系统构造函数

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')

开辟内存空间
改变 this 的指向为当前对象
设置对象的属性和方法值
返回 this 指向的对象

自定义构造函数的缺点

内存消耗严重数据不共享

var per = new Person()
var per1 = new Person()
per.sayHi()
per1.sayHi()
console.log(per.sayHi == per1.sayHi)  // -> false

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

工厂模式创建对象

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 构造函数
- 可以通过构造器去判断

3.8 KiB Raw Blame History

20191120

3.8 KiB

Raw Blame History