面向对象基础

dyc javaScript

# 面向对象编程

HTML/CSS 是标记语言
LESS/SASS/STYLUS...CSS预编译器用面向对象的思想去编写css，最后把其生成浏览器可以识别的普通CSS

编程语言: JAVA PYTHON PHP C# C C++ RUBY GO JS NODE......

OOP(Object Oriented Programming)：面向对象设计
POP(Procedure Orientde): 面向过程程序设计

# 什么是面向对象

对象、类、实例：万物皆对象，我们需要把万物按特点分类，类别只是比对象具体化一些的抽象，实例就是具体的事物
JS本身就是基于面向对象研发出来的编程语言：内置类

数据类型：每一种数据类型都有自己对应的类别
- Numeber数字类，每一个数字(NaN\Infinity)都是它的一个实例
- String
- Boolean
- Null 有类但不可用
- undefined 有类但不可用
- Symbol 不可以被new
- bigInt
- Object (Array、RegExp、Date...)
- function

// 数组的学习
// 1. 准备Array类的实例（一个具体的数组）
// 2. 开始研究数组结构、研究它的方法（一般都在Array.prototype原型上）
let arr = [10,20,30]

DOM 元素（每个DOM元素对象也有自己的类和祖先类）
- DIV元素对象 => HTMLDivElement => HTMLElement => Element => Node => EvenTarget => Object
- A元素对象 => HTMLAnchorElement => HTMLElement...
- DOCUMENT => HTMLDocument => Document => Node...
- window => window => windowProperties => EvenTarget... 元素集合 => HTMLCollection => Object 节点集合 => NodeList => Object

<div id="box"></div>
console.log(dir(box))
<a href="" id="link"></a>
console.log(dir(link))
// 元素集合
dir(document,getElementsByTagName('*'))

......

# new执行的原理

只要一个函数执行是通过new来执行的，我们就把这个函数叫做类，返回结果是这个类的实例

function Dog(name){
    this.name = name
}
Dog.prototype.bark = function(){
    console.log('dyc')
}
Dof.prototype.sayName = function(){
    console.log('my name is' + this.name)
}

# 自定义类

真实开发的时候，光这些内置类是不够的，我们还需要自定义类来实现功能的开发

// 创建函数并执行（每个类都是函数数据类型，包含内置类和自定义类）
function func(){}
func()
// 自定义类(类名的第一个首字母一般都要大写)
function Func(){

}
//let f = Func() 把他当做普通函数执行（形成私有的上下文、作用域链、THIS[window]、ARGUMENTS、形参赋值、变量提升、代码执行...），小f获取的是函数的返回结果（函数没有RETURN，所以f=function）

let f = new Func() //这是构造函数执行（当做类来执行，而不是普通函数了），此时Func被称为"类"，返回结果(f)被称作当前类的"实例"，他是一个实例对象

构造函数执行（类）和普通函数执行的区别
没有return返回值

function Func(x,y){
    let num = x + y
    this.x = x
    this.y = y
}
let f1 = Func(10,20)
console.log(f1,windeow.x) // undefined 10
let f2 = new Func(10,20)
console.log(f2) // {x:10,y:20} 当前类的实例对象

解析 dyc

有return返回值
基于 instanceof 可以检测当前对象是否为某个类的实例语法：实例 instanceof 类，是的话返回TRUE,反之FALSE

function Func(x,y){
    // num只是当做普通函数执行的时候，给私有上下文中设置的私有变量，和实例对象没有关系，只有THIS是实例对象,所以只有this.xxx = xxx才和实例有关系
    let num = x + y
    this.x = x
    this.y = y
    return {
        name: 'xxx'
    } //=> 返回基本类型值，f2依然是创建的实例对象；如果自己返回的就是一个引用值，一切以自己返回的为主，此时的f2 = {name: 'xxx'}而不再是当前类的实例了
    let f2 = new Func(10,20)
    console.log(f2)
    console.log(f2 instanceof Func)
}

每一个对象（包含实例对象）都有很多属性和方法，在自己堆内存中储存的都是私有的属性方法，基于_proto_原型链查找类prototype原型上的都是共有的属性方法检测属性是当前对象私有的还是共有的：

对象.hasOwnProperty(属性) 检测是否为私有的属性（只有是私有属性才是TRUE，哪怕有这个属性，但是为公有属性结果也是FALSE）
属性 in 对象，检测是否他的属性（不论公有还是私有都可以）

console.log('x' in f2) //=> TRUE
console.log(f2.hasOwnProperty('x')) //=> TRUE
console.log('toString' in f2) //=> TRUE
console.log(f2.hasOwnProperty('toString')) //=> FALSE   toString是他的公有属性

闭包引发的高阶编程技巧原型和原型链

Eumenides

Choose mode

面向对象基础

面向对象基础

# 面向对象编程

# 什么是面向对象

# new执行的原理

# 自定义类