深入js面向对象

玩犊子
44 阅读11分钟

深入JS面向对象

面向对象是现实的抽象方式 对象是JavaScript中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起，更好的描述一个事物：

  • 比如我们可以描述一辆车：Car，具有颜色（color）、速度（speed）、品牌（brand）、价格（price），行驶（travel）等 等；
  • 比如我们可以描述一个人：Person，具有姓名（name）、年龄（age）、身高（height），吃东西（eat）、跑步（run） 等等

用==对象来描述事物==，更有利于我们将==现实的事物==，抽离成代码中某个==数据结构==：

  • 所以有一些编程语言就是纯面向对象的编程语言，比Java；
  • 你在实现任何现实抽象时都需要先创建一个类，根据类再去创建对象；

一.JavaScript的面向对象

JavaScript其实支持多种编程范式的，包括函数式编程和面向对象编程：

  • JavaScript中的对象被设计成一组属性的无序集合，像是一个哈希表，有key和value组成；
  • key是一个标识符名称，value可以是任意类型，也可以是其他对象或者函数类型；
  • 如果值是一个函数，那么我们可以称之为是对象的方法

如何创建一个对象呢？

早期使用创建对象的方式最多的是使用Object类，并且使用new关键字来创建一个对象： 这是因为早期很多JavaScript开发者是从Java过来的，它们也更习惯于Java中通过new的方式创建一个对象；

后来很多开发者为了方便起见，都是直接通过字面量的形式来创建对象： 这种形式看起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来；

// 创建一个对象, 对某一个人进行抽象(描述)
// 1.创建方式一: 通过new Object()创建
var obj = new Object()
obj.name = "stone"
obj.age = 18
obj.height = 1.88
obj.running = function() {
  console.log(this.name + "在跑步~")
}

// 2.创建方式二: 字面量形式
var info = {
  name: "小明",
  age: 40,
  height: 1.98,
  eating: function() {
    console.log(this.name + "在吃东西~")
  }
}

二.对属性操作的控制

在前面我们的属性都是==直接定义在对象内部==，或者直接==添加到对象内部==的： 但是这样来做的时候我们就==不能对这个属性进行一些限制==：比如这个属性是否是可以==通过delete删除==的？这个属性==是否在for-in遍历的时候被遍历出来==呢？

var obj = {
  name: "stone",
  age: 18,
  height: 1.83
}

var obj = {
  name: "why",
  age: 18
}

// 获取属性
console.log(obj.name)

// 给属性赋值
obj.name = "kobe"
console.log(obj.name)

// 删除属性
// delete obj.name
// console.log(obj)

// 需求: 对属性进行操作时, 进行一些限制
// 限制: 不允许某一个属性被赋值/不允许某个属性被删除/不允许某些属性在遍历时被遍历出来

// 遍历属性
for (var key in obj) {
  console.log(key)
}

如果我们想要对一个属性==进行比较精准的操作控制==，那么我们就可以使用==属性描述符==。

  • 通过属性描述符可以精准的添加或修改对象的属性；
  • 属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改；

Object.defineProperty Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

//Object.defineProperty(obj, prop, descriptor)

var obj = {
  name: "stone",
  age: 18
}

// 属性描述符是一个对象
Object.defineProperty(obj, "height", {
  // 很多的配置
  value: 1.83
})

console.log(obj)
console.log(obj.height)

==可接收三个参数：==

  • obj要定义属性的对象；
  • prop要定义或修改的属性的名称或 Symbol；
  • descriptor要定义或修改的属性描述符；

==返回值:== 被传递给函数的对象

属性描述符分类 属性描述符的类型有两种：

  • ==数据属性==（Data Properties）描述符（Descriptor）；
  • ==存取属性==（Accessor访问器 Properties）描述符（Descriptor）； image.png
  1. 数据属性描述符 数据数据描述符有如下四个特性：

[[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；
  • 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；

[[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
  • 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；

[[Writable]]：表示是否可以修改属性的值；

  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Writable]]为true；
  • 当我们通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为false；

[[value]]：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改；

  • 默认情况下这个值是undefined；
// name和age虽然没有使用属性描述符来定义, 但是它们也是具备对应的特性的
// value: 赋值的value
// configurable: true
// enumerable: true
// writable: true
var obj = {
  name: "stone",
  age: 18
}

// 数据属性描述符
// 用了属性描述符, 那么会有默认的特性
Object.defineProperty(obj, "address", {
  // 很多配置
  // value: "北京市", // 默认值undefined
  // 该特殊不可删除/也不可以重新定义属性描述符
  // configurable: false, // 默认值false
  // // 该特殊是配置对应的属性(address)是否是可以枚举
  // enumerable: true, // 默认值false
  // // 该特性是属性是否是可以赋值(写入值) 
  // writable: false // 默认值false
})

// 测试configurable的作用
// delete obj.name
// console.log(obj.name)
// delete obj.address
// console.log(obj.address)

// Object.defineProperty(obj, "address", {
//   value: "成都市",
//   configurable: true
// })

// 测试enumerable的作用
console.log(obj)
for (var key in obj) {
  console.log(key)
}
console.log(Object.keys(obj))

// 测试Writable的作用
// obj.address = "上海市"
// console.log(obj.address)

存取属性描述符 数据数据描述符有如下四个特性：

[[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性 描述符；

  • 和数据属性描述符是一致的；
  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；
  • 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；

[[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；

  • 和数据属性描述符是一致的；
  • 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
  • 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；

[[get]]：获取属性时会执行的函数。默认为undefined

[[set]]：设置属性时会执行的函数。默认为undefined

var obj = {
  name: "stone",
  age: 18,
  _address: "北京市"
}

// 存取属性描述符
// 1.隐藏某一个私有属性被希望直接被外界使用和赋值
// 2.如果我们希望截获某一个属性它访问和设置值的过程时, 也会使用存储属性描述符
//默認是執行get 這裏相當把屬性於隱藏起來
Object.defineProperty(obj, "address", {
  enumerable: true,
  configurable: true,
  get: function() {
    foo()
    return this._address
  },
  set: function(value) {
    bar()
    this._address = value
  }
})

console.log(obj.address)

obj.address = "上海市"
console.log(obj.address)

function foo() {
  console.log("获取了一次address的值")
}

function bar() {
  console.log("设置了addres的值")
}

同时定义多个属性 Object.defineProperties() 方法直接在一个对象上定义==多个==新的属性或修改现有属性，并且返回该对象。

var obj = {
  // 私有属性(js里面是没有严格意义的私有属性)
  _age: 18,
  _eating: function() {},
  set age(value) {
    this._age = value
  },
  get age() {
    return this._age
  }
}

Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "stone"
  },
  age: {
    configurable: true,
    enumerable: true,
    get: function() {
      return this._age
    },
    set: function(value) {
      this._age = value
    }
  }
})

obj.age = 19
console.log(obj.age)

console.log(obj)

对象方法的补充 获取对象的属性描述符：

  • getOwnPropertyDescriptor
  • getOwnPropertyDescriptors

禁止对象扩展新属性：preventExtensions

  • 给一个对象添加新的属性会失败（在严格模式下会报错）；

密封对象，不允许配置和删除属性：seal

  • 实际是调用preventExtensions
  • 并且将现有属性的configurable:false

冻结对象，不允许修改现有属性： freeze

  • 实际上是调用seal
  • 并且将现有属性的writable: false
//获取属性描述符
var obj = {
  // 私有属性(js里面是没有严格意义的私有属性)
  _age: 18,
  _eating: function() {}
}

Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "stone"
  },
  age: {
    configurable: true,
    enumerable: true,
    get: function() {
      return this._age
    },
    set: function(value) {
      this._age = value
    }
  }
})

// 获取某一个特性属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, "name"))
console.log(Object.getOwnPropertyDescriptor(obj, "age"))

// 获取对象的所有属性描述符
console.log(Object.getOwnPropertyDescriptors(obj))



//object的方法对对象的限制
var obj = {
  name: 'stone',
  age: 18
}

// 1.禁止对象继续添加新的属性
Object.preventExtensions(obj)

obj.height = 1.88
obj.address = "成都市"

console.log(obj)

// 2.禁止对象配置/删除里面的属性
// for (var key in obj) {
//   Object.defineProperty(obj, key, {
//     configurable: false,
//     enumerable: true,
//     writable: true,
//     value: obj[key]
//   })
// }

Object.seal(obj)

delete obj.name
console.log(obj.name)

// 3.让属性不可以修改(writable: false)
Object.freeze(obj)

obj.name = "kobe"
console.log(obj.name)

三.创建多个对象的方案

如果我们现在希望创建一系列的对象：比如Person对象

  • 包括张三、李四、王五、李雷等等，他们的信息各不相同；
  • 那么采用什么方式来创建比较好呢？

目前我们已经学习了两种方式：

  • new Object方式；
  • 字面量创建的方式；
var p1 = {
  name: "张三",
  age: 18,
  height: 1.88,
  address: "广州市",
  eating: function() {
    console.log(this.name + "在吃东西~")
  },
  running: function() {
    console.log(this.name + "在跑步~")
  }
}

var p2 = {
  name: "李四",
  age: 20,
  height: 1.98,
  address: "北京市",
  eating: function() {
    console.log(this.name + "在吃东西~")
  },
  running: function() {
    console.log(this.name + "在跑步~")
  }
}

var p3 = {
  name: "王五",
  age: 30,
  height: 1.78,
  address: "上海市",
  eating: function() {
    console.log(this.name + "在吃东西~")
  },
  running: function() {
    console.log(this.name + "在跑步~")
  }
}

这种方式有一个很大的弊端：创建同样的对象时，需要编写重复的代码；
  1. 创建对象的方案 – 工厂模式 我们可以想到的一种创建对象的方式：工厂模式
  • 工厂模式其实是一种常见的设计模式；
  • 通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象；
// 工厂模式: 工厂函数
function createPerson(name, age, height, address) {
  var p = {}
  p.name = name
  p.age = age
  p.height = height;
  p.address = address

  p.eating = function() {
    console.log(this.name + "在吃东西~")
  }

  p.running = function() {
    console.log(this.name + "在跑步~")
  }

  return p
}

var p1 = createPerson("张三", 18, 1.88, "广州市")
var p2 = createPerson("李四", 20, 1.98, "上海市")
var p3 = createPerson("王五", 30, 1.78, "北京市")

// 工厂模式的缺点(获取不到对象最真实的类型)
console.log(p1, p2, p3)
  1. 创建对象的方案 – 构造函数 认识构造函数 工厂方法创建对象有一个比较大的问题：我们在打印对象时，对象的类型都是Object类型
  • 但是从某些角度来说，这些对象应该有一个他们共同的类型；
  • 下面我们来看一下另外一种模式：构造函数的方式；

我们先理解什么是构造函数？

  • 构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数；
  • 在其他面向的编程语言里面，构造函数是存在于类中的一个方法，称之为构造方法；
  • 但是JavaScript中的构造函数有点不太一样；

JavaScript中的构造函数是怎么样的？

  • 构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；
  • 那么如果这么一个普通的函数被使用new操作符来调用了，那么这个函数就称之为是一个构造函数；

那么被new调用有什么特殊的呢？ ==new操作符调用的作用== 如果一个函数被使用new操作符调用了，那么它会执行如下操作：

  • 在内存中创建一个新的对象（空对象）；
  • 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；（后面详细讲）；
  • 构造函数内部的this，会指向创建出来的新对象；
  • 执行函数的内部代码（函数体代码）；
  • 如果构造函数没有返回非空对象，则返回创建出来的新对象；
function foo() {
  console.log("foo~, 函数体代码")
}

// foo就是一个普通的函数
// foo()

// 换一种方式来调用foo函数: 通过new关键字去调用一个函数, 那么这个函数就是一个构造函数了
var f1 = new foo
console.log(f1)


// 当我们通过new去调用一个函数时, 和通过的调用到底有什么区别?


// 规范: 构造函数的首字母一般是大写
function Person(name, age, height, address) {
  this.name = name
  this.age = age
  this.height = height
  this.address = address
	
  this.eating = function() {
    console.log(this.name + "在吃东西~")
  }

  this.running = function() {
    console.log(this.name + "在跑步")
  }
}


var p1 = new Person("张三", 18, 1.88, "广州市")
var p2 = new Person("李四", 20, 1.98, "北京市")

console.log(p1)
console.log(p2)
p1.eating()
p2.eating()

构造函数的缺点

function foo() {
  function bar() {

  }
  return bar
}

var fn1 = foo()
var fn2 = foo()

console.log(fn1 === fn2)
//false
  1. 创建对象的方案 – 原型和构造函数
function Person(name, age, height, address) {
  this.name = name
  this.age = age
  this.height = height
  this.address = address
}

Person.prototype.eating = function() {
  console.log(this.name + "在吃东西~")
}

Person.prototype.running = function() {
  console.log(this.name + "在跑步~")
}

var p1 = new Person("why", 18, 1.88, "北京市")
var p2 = new Person("kobe", 20, 1.98, "洛杉矶市")

p1.eating()
p2.eating()


//就是把函数放到原型里面去
avatar
文章
阅读
粉丝