js高阶6、面向对象（OOP）、构造函数模式

面向对象是编程思想，JAVA、PHP、C#、C++、.net（dot net）、JS…这些都是面向对象编程的

面向过程编程思想：C语言是面向过程的

html、css:是标记语言不是编程语言，没有所谓的面向对象编程

less、sass:属于css预编译语言，旨在把css变为编程语言（面向对象的编程语言）

面向对象

JS本身就是基于面向对象创造出来的语言，而非是面向对象的语言

JS可以模拟实现继承和封装，但是无法模拟实现多态，所以我们说JS是一门基于对象的语言，而非是面向对象的语言。

JavaScript是通过原型（prototype）来实现面向对象编程

面向对象的三大特性：

1、封装

隐藏对象的属性和实现细节，仅对外提供公共访问方式，将变化隔离，便于使用，提高复用性和安全性。

2、继承

提高代码复用性；继承是多态的前提。

3、多态

父类或接口定义的引用变量可以指向子类或具体实现类的实例对象。提高了程序的拓展性。

`对象、类、实例`

对象：编程语言中的对象是泛指，万物皆对象（我们所要研究学习以及使用的都是对象）

类：是抽象的。对象的具体细分（按照属性或者特性细分为一些类别）

实例：是具体的。某一类中具体的事物（对象数据类型）

实例就是一个对象

[实际生活当中]

+人

+正常人类

+程序员类

我就是程序员类别中的一个实例

JS中常用的内置类

关于数据类型的：
- Number:每一个数字或者NaN是它的一个实例
- String：字符串类
- Boolean：布尔类
- Null
- Undefined：浏览器屏蔽了我们操作Null或者Undefined这个类
- Object：对象类，每一个对象数据类型都是它的实例
  - Array：数组类
  - RegExp：正则类
  - Date：日期类
  - …
- Function：函数类，每一个函数都是它的一个实例
关于元素对象和元素集合的
- HTMLCollection:元素集合类
- NodeList:节点集合类
- HTMLDivElement ： html div标签类
- HTMLElement： html标签类
- Element：标签类
- Node：节点类
- EventTarget：事件对象类

每一个HTML标签都有一个自己所属的内置类

//获取元素集合类
getElementsByClass
getElementsByTagName
querySelectorAll

1
2
3

//获取节点集合类方法：
getElementsByName
childNodes

目前阶段学习面向对象对于我们的意义

研究数组：

1、创建一个数组的实例，研究其基础语法和结构

2、如果想要研究数据具备的功能方法，我们只需要看Array/Object这些类上都赋予了它什么样的方法

问题

document.getElementById它的上下文只能是document，为什么其他的不可以？（控制台dir(document)）?

因为getElementById这个方法只有Document这个类才有，其他标签类上没有；并且document是Document的实例，所以document才能使用这个方法

我们遇到一个数据（对象）时先考虑它是谁的实例，这个类提供给了它什么方法

基于面向对象创建数据值

//=>字面量创建方式
var arr=[12,23]

//严谨的基于面向对象（构造函数）方式创建一个数组
var ary=new Array();

//两种创建方式在核心意义上没有区别，都是创建Array这个类的一个实例，但是语法上是有区别的
//1、字面量创建方式传递什么进来，都是给数组加入内容
//2、构造函数创建方式
//new Array(10);//创建一个长度为10的数组，数组中的每一项都是空
//new Array('10');如果只传递一个实参并且实参不是数字，相当于把当前值作为数组的第一项存储进来
//new Array(10,20,30); //如果传递多个实参，不是设置长度，而是把传递的内容当做数组中的每一项存储起来

两种创建方式在核心意义上没有区别，都是创建Array这个类的一个实例，但是语法上是有区别的

1、字面量创建方式传递什么进来，都是给数组加入内容
2、构造函数创建方式
- new Array(10);//创建一个长度为10的数组，数组中的每一项都是空
- new Array('10');如果只传递一个实参并且实参不是数字，相当于把当前值``作为数组的第一项存储进来
- new Array(10,20,30); //如果传递多个实参，不是设置长度，而是把传递的内容当做数组中的每一项存储起来

1 2	var obj={name:'哈哈哈'} var obj=new Object() //一般只用于创建空的对象，如果需要增加键值对，创建完成以后自己依次添加即可

1
2

var num=12;             //字面量创建出来的是一个基本数据类型值（但是也是Number的一个实例，可以调取Number赋予它的方法）
var num=new Number();   //构造函数方式创建出来的也是Number的一个实例（也可以调取Number赋予它的方法），但是获取的结果是对象数据类型的

严谨的面向对象中，所有类创建实例都得`通过new方式创建，创建出来的结果不可能出现基本数据类型值，都是对象数据类型值`

`但是基本数据类型值都是对应类的一个实例都能使用对应类的方法`

构造函数设计模式（constructor）

在js当中，当我们使用new XXX()执行函数的时候，此时的函数就不是普通的函数了，而是变为一个类，返回的结果叫做当前类的实例（对象数据类型的this），我们把这种new XXX()执行的方式称之为构造函数设计模式

使用构造函数方式，主要是为了创建类和实例的，也就是基于面向对象编程思想来实现一些需求的处理

   function Fn(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
    this.getName=function(){
        alert(this.name)
    }
   }
   //Fn();    //普通函数执行
   var f=new Fn();    //构造函数执行   Fn是一个类
       //f就是当前类的一个实例  “构造函数设计模式”（我们一般都会把类名第一个字母大写）
/**
    1、 没有显示的创建对象
    2、 直接将属性和方法赋值给了this对象
    3、 没有return语句
**/

function Fn2(){
    console.log(1)
}

var f=new Fn2();
//Fn2的代码会先执行打印1，但是f是Fn2的实例是个对象，因为没有this.xxx=xxx的操作所以f是个空对象{}

`普通函数执行` VS `构造函数执行`

普通函数执行

1、开辟一个新的私有作用域

2、把创建函数的字符串复制过来变为真正的js表达式

3、形参赋值

4、变量提升

5、代码自上而下执行（return 后面的值就是当前函数返回的结果）

6、栈内存释放或者不释放问题

function fn(num){
    this.num=num;           //=>this指window  相当于给全局对象增加一个num的属性 属性值是10
    var total=null;
    total+=num;
    return total;
}
var f=fn(10)        //=>f:10

构造函数执行

1、首先和普通函数执行一样，也需要开辟一个新的私有作用域

2、把创建函数的字符串复制过来变为真正的js表达式

3、在私有作用域中完成类似于普通函数的操作：形参赋值、变量提升

4、在代码自上而下执行之前构造函数有属于自己的比较特殊的操作：`“浏览器” 会在当前作用域当中默认创建一个对象数据类型的值(开辟堆内存)，并且会让当前函数中的 “执行主体（this）指向创建出来的对象”`

5、像普通函数一样自上而下执行构造函数代码：`this.XXX=XXX这些操作都是给默认创建的这个对象增加属性名和属性值`

6、代码执行完成以后，即使函数中没有return ，在构造函数模式中：`浏览器会默认的把创建的对象返回到函数的外面` （相当于默认 return this;）

构造函数执行，既具备普通函数执行的一面，也具备自己独有的一些操作

在构造函数执行期间，浏览器默认创建的对象（也就是函数体中的this）就是当前这个类的一个实例，浏览器会把默认创建的实例返回，所以我们说：new Fn()执行，Fn是一个类，返回的结果是Fn这个类的一个实例

构造函数执行，构造函数体中的this是当前类的实例（就是一个json）

实例是对象数据类型（json）

function Fn(num){
    //=>在构造函数模式中，方法体中出现的this是当前类的一个实例（this.XXX=XXX都是给当前实例增加一些属性）
    this.num=num;
}
var f= new Fn(10)
console.log(f.num)  //10

深入理解构造函数执行的步骤

当构造函数或者类，执行的时候不需要传递任何的实参时，此时我们是否加小括号就不重要了（不传递实参的情况下，小括号可以省略）

构造函数执行同时具备了普通函数执行的一面也有自己特殊的一面，但是和实例相关的只有自己特殊的一面（也就是this.XXX=XXX才相当于给当前实例增加的属性）

`函数体中出现的私有变量，和实例都没有直接的关系,只有this.XXX=XXX才和实例有关`

在构造函数中，使用var，function声明的变量称为`私有变量`；私有变量的作用域，`只在构造函数内容有效`。即只能在构造函数内部使用，在构造函数外部，`无论使用对象名还是类名都无法调用`

通过类创建出来的每一个实例都是单独的个体（单独的堆内存空间），实例和实例之间是不相同并且独立互不影响的（市面上部分开发把这种模式叫做单例模式，这种说法是错的，js当中这种模式叫做构造函数设计模式）

在构造函数体中通过this.XXX=XXX给实例设置的属性都是当前实例的`私有属性`

构造函数体（默认返回的是实例：对象类型值）当我们自己手动设置了return时，`return的是基本类型值时`，对最后返回的实例`没有任何影响`，但是如果`返回的是引用数据类型的值时`，会把默认返回的实例替换掉`不再是实例`

function Fn(){
    var  num=100;
    this.name='hahah'
    this.sum=function(){}

}
var f1=new Fn();  //Fn 类；f1  Fn的一个实例
var f2=new Fn;    //不传递实参的情况下，小括号可以省略

//私有变量和实例没关系
console.log(f1.num)     //undefined
console.log(f1.name)    //hahah

//不同的实例是不同的空间地址
console.log(f1===f2)   //false
console.log(f1.sum===f2.sum)   //false

function Fn(){
    this.name='aaa'
    return  10;
}
var f=new Fn();
console.log(f)   //f:{name:'aaa'}  f依然是当前实例的一个实例


function Fn(){
    this.name='aaa'
    return  {name:'bbb'};
}
var f=new Fn();
console.log(f)   //f:{name:'bbb'}   f不再是 Fn的实例，而是变为手动返回的对象了

XX instanceof YY:测当前实例xx是否属于某个类yy

instanceof:用来检测当前实例xx是否属于某个类yy

instanceof解决了typeof无法识别是数组还是正则的问题

检测数据类型：typeof,instanceof,constructor,object.prototype.tostring.call

function Fn(){

}
var f=new Fn();

console.log(f instanceof Fn)  //=>true

console.log([] instanceof Array)  //=>true
console.log(/^$/ instanceof Fn)  //=>false
console.log(f instanceof Fn)  //=>true

[] instanceof Object
true
/^$/ instanceof Object
true
/^$/ instanceof Array
false
[] instanceof Array
true
/^$/ instanceof RegExp
true

hasOwnProperty VS in

XX.hasOwnProperty(YY)：检测当前这个属性YY是不是XX这个对象的私有属性（不仅要是对象的属性，而且需要是私有的才可以）

YY in XX：用来检测当前这个属性YY是否隶属于对象XX（不管是对象的私有属性还是公有属性，只要有返回的就是 true）

var obj={
    name:'aaa',
    age:18
}
'name' in obj        //true
'sex' in obj        //false
'toString' in obj        //true   (公有属性)
'hasOwnProperty' in obj        //true   (公有属性)
    //hasOwnProperty是Object这个内置类中提供的属性方法，只要当前对象是Object的一个实例，就可以使用这个方法


obj.hasOwnProperty('name')    //true
obj.hasOwnProperty('toString')    //false

function Fn(){
    this.num=100;
}
var f=new Fn();
f.hasOwnProperty('num')    //true

检测一个属性是否是当前对象的公有属性

1、是对象的一个属性

2、不是对象的私有属性

function hasPubProperty(attr,obj){
    return (attr in  obj) && (obj.hasOwnProperty(attr)===false)
}
hasPubProperty(hasOwnProperty,{XXX:'XXX'})

面向对象

面向对象的三大特性：

1、封装

2、继承

3、多态

对象、类、实例

JS中常用的内置类

目前阶段学习面向对象对于我们的意义

问题

基于面向对象创建数据值

严谨的面向对象中，所有类创建实例都得通过new方式创建，创建出来的结果不可能出现基本数据类型值，都是对象数据类型值

但是基本数据类型值 都是对应类的一个实例 都能使用对应类的方法

构造函数设计模式（constructor）

普通函数执行 VS 构造函数执行

普通函数执行

构造函数执行

1、首先和普通函数执行一样，也需要开辟一个新的私有作用域

2、把创建函数的字符串 复制过来 变为真正的js表达式

3、在私有作用域中完成类似于普通函数的操作：形参赋值、变量提升

4、在代码自上而下执行之前 构造函数有属于自己的比较特殊的操作：“浏览器” 会在当前作用域当中默认创建一个对象数据类型的值(开辟堆内存)，并且会让当前函数中的 “执行主体（this）指向创建出来的对象”

5、像普通函数一样自上而下执行构造函数代码：this.XXX=XXX这些操作都是给默认创建的这个对象增加属性名和属性值

6、代码执行完成以后，即使函数中没有return ，在构造函数模式中：浏览器会默认的把创建的对象返回到函数的外面 （相当于 默认 return this;）

实例是对象数据类型（json）

深入理解构造函数执行的步骤

函数体中出现的私有变量，和实例都没有直接的关系,只有this.XXX=XXX才和实例有关

在构造函数中，使用var，function声明的变量称为私有变量；私有变量的作用域，只在构造函数内容有效。即只能在构造函数内部使用，在构造函数外部，无论使用对象名还是类名都无法调用

在构造函数体中通过this.XXX=XXX给实例设置的属性都是当前实例的私有属性

构造函数体（默认返回的是实例：对象类型值）当我们自己手动设置了return时，return的是基本类型值时，对最后返回的实例没有任何影响，但是如果返回的是引用数据类型的值时，会把默认返回的实例替换掉不再是实例

XX instanceof YY:测当前实例xx是否属于某个类yy

hasOwnProperty VS in

`对象、类、实例`

严谨的面向对象中，所有类创建实例都得`通过new方式创建，创建出来的结果不可能出现基本数据类型值，都是对象数据类型值`

`但是基本数据类型值都是对应类的一个实例都能使用对应类的方法`

`普通函数执行` VS `构造函数执行`

2、把创建函数的字符串复制过来变为真正的js表达式

4、在代码自上而下执行之前构造函数有属于自己的比较特殊的操作：`“浏览器” 会在当前作用域当中默认创建一个对象数据类型的值(开辟堆内存)，并且会让当前函数中的 “执行主体（this）指向创建出来的对象”`

5、像普通函数一样自上而下执行构造函数代码：`this.XXX=XXX这些操作都是给默认创建的这个对象增加属性名和属性值`

6、代码执行完成以后，即使函数中没有return ，在构造函数模式中：`浏览器会默认的把创建的对象返回到函数的外面` （相当于默认 return this;）

`函数体中出现的私有变量，和实例都没有直接的关系,只有this.XXX=XXX才和实例有关`

在构造函数中，使用var，function声明的变量称为`私有变量`；私有变量的作用域，`只在构造函数内容有效`。即只能在构造函数内部使用，在构造函数外部，`无论使用对象名还是类名都无法调用`

在构造函数体中通过this.XXX=XXX给实例设置的属性都是当前实例的`私有属性`

构造函数体（默认返回的是实例：对象类型值）当我们自己手动设置了return时，`return的是基本类型值时`，对最后返回的实例`没有任何影响`，但是如果`返回的是引用数据类型的值时`，会把默认返回的实例替换掉`不再是实例`