H39-面向对象编程

Object-Oriented Programming

面向对象编程
缩写 OOP

MDN-JavaScript面向对象简介

面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。今天，许多流行的编程语言（如Java，JavaScript，C＃，C+ +，Python，PHP，Ruby和Objective-C）都支持面向对象编程（OOP）。
相对于 “一个程序只是一些函数的集合，或简单的计算机指令列表。”的传统软件设计观念而言，面向对象编程可以看作是使用一系列对象相互协作的软件设计。 在 OOP 中，每个对象能够接收消息，处理数据和发送消息给其他对象。每个对象都可以被看作是一个拥有清晰角色或责任的独立小机器。
面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性，在大型软件工程中广为流行。凭借其对模块化的重视，面向对象的代码开发更简单，更容易理解，相比非模块化编程方法 1, 它能更直接地分析, 编码和理解复杂的情况和过程。

术语

Namespace 命名空间
允许开发人员在一个独特, 应用相关的名字的名称下捆绑所有功能的容器。
Class 类
定义对象的特征。它是对象的属性和方法的模板定义.
Object 对象
类的一个实例。
Property 属性
对象的特征，比如颜色。
Method 方法
对象的能力，比如行走。
Constructor 构造函数
对象初始化的瞬间, 被调用的方法. 通常它的名字与包含它的类一致.
Inheritance 继承
一个类可以继承另一个类的特征。
Encapsulation 封装
一种把数据和相关的方法绑定在一起使用的方法.
Abstraction 抽象
结合复杂的继承，方法，属性的对象能够模拟现实的模型。
Polymorphism 多态
多意为‘许多’，态意为‘形态’。不同类可以定义相同的方法或属性。

原型编程

基于原型的编程不是面向对象编程中体现的风格，且行为重用（在基于类的语言中也称为继承）是通过装饰它作为原型的现有对象的过程实现的。这种模式也被称为弱类化，原型化，或基于实例的编程。

封装 Model View Controller

代码

new

方应杭

复习 this

button.onclick = function f1(){
    console.log(this) // 触发事件的元素。  button
}

button.onclick.call({name: 'frank'})



button.addEventListener('click', function(){
    console.log(this) // 该元素的引用 button
}
2 结果


$('ul').on('click', 'li' /*selector*/, function(){
    console.log(this) //this 则代表了与 selector 相匹配的元素。
    // li 元素
})
3 结果
去看 on 的源码呀 -> 做不到
jQuery 的开发者知道 onclick 的源码，f1.call(???)
jQuery 的开发者写了文档
看文档呀

return 和 传参

一个练习找this的代码

function X(){
  return obj = {
    name:'obj',
    options: null,
    f1(x){
      this.options = x
      this.f2()
    },
    f2(){
      this.options.name = 'ob'
      this.options.f2.call(this)
    }
  }
}

var options = {
  name:"options",
  f1(){},
  f2(){
  console.log(this)
}
}

var x = X()
var x2 = X()
// return 回来的是对象，是新建立的
console.log(x === x2) // false
x.age = 12
// 传参对象传的是地址，叫引用，名字不同但相等
x.f1(options)
options.f2()
console.log(options === x.options) // true

注意这里

...
f1(x){
      this.options = x
      this.f2()
    },
...
x.f1(options)

这里将options传入f1，x是对options的引用，
而不是像return一样是一个新的对象，
注意脑子不要乱。

&& 和 || 操作符

注意，在js中 &&、||返回值并不是true或false

// && 返回它遇到的第一个 falsy 值，
1 && 0 && console.log(2) // 0
// 如果没有falsy值，返回最后一个非 falsy 值
1 && 2 && 3 // 3

// || 返回它遇到的第一个非 falsy 值
0 || null || undefined || 1 || '' || NaN  // 1

MDN