js面向对象概念篇

概念

什么是对象

对象就是一个封装了数据(属性)和方法的集合体。

什么是面向对象程序设计(Object Oriented Programming)

面向对象，英文名字叫 Object Oriented，是一种编程方法。是和面向过程相对应的。

面向对象和面向过程

我们以吃饭这件事来看看什么是面向对象，什么是面向过程。
对于吃饭这件事来说我们通常有两个解决方案：点外卖和自己做。这俩方案中，点外卖就是面向对象，而自己
做就是面向过程。具体对比如下:
在面向过程的吃饭中，我们想要填饱肚子，需要自己亲自下厨把这顿饭做出来，那么，我们就需要先想好吃什
么，然后去买菜、洗菜、洗米、蒸饭、炒菜等等一系列的事情（方法）。 在做饭的过程中，我们还会面临各种
各样的问题，比如，媳妇忽然想换个口味，不想吃今天做的菜了，或者我做的是个咸的 西红柿炒蛋，但是媳妇
今天要吃甜的，怎么办我们就需要重新做。
那如果是面向对象会怎么样呢？我们今天想要吃什么了，直接打开外卖软件找到自己想要吃的东西，下单就可
以了。
在这个场景中，外卖软件就是是「对象」。在面向对象编程中，抛弃了函数，想要实现一个功能不再是通过函
数的叠加调用实现的了。而是通过对象。

字面量构建对象不提了。。。你懂得

构建对象工厂模式

// 工厂模式: 最常用的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。
function Person(name,age){
    return {
        name,
        age,
        sayName(){
            console.log(this.name);
        }
    };
}
let hhh= Person("hello",8);
let iii= Person("hi",10);
hhh.sayName();
iii.sayName();
// console.log(hhh);
// console.log(iii);

new 运算符

// new 运算符    
function Person(name="hello",age=8){
    /*
    调用 new 方法之后
        1. 执行该函数
        2. 隐式创建一个对象
        3. 把该对象 和 函数的this进行绑定
        4. 把加在 this 上的属性 和 方法 都加到 该对象上
        5. 函数执行完毕,返回该对象
    */
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name);
    };
}
let p = new Person();
console.log(p);
// new fnName 

/*
   new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
   创建一个空的简单JavaScript对象（即{}）；
   链接该对象（即设置该对象的构造函数）到另一个对象 ；
   将步骤1新创建的对象作为this的上下文 ；
   如果该函数没有返回对象，则返回this。

   构造函数（Person）:  new 后边跟的这个函数，叫做构造函数，当我们 new 函数后，会执行构造函数，并根据构造函数的结构生成一个对象(实例化)，并返回;

   面试版：构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。
*/

function Person(name="hello",age=8){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name);
    };
    /*
        在构造函数中，this 指向实例化对象
    */
    // return 123;
    /*
        如果 return 的是一个基本类型的数据，会被实例化对象覆盖
    */
	//    return {
	//        name: "hi"
	//    }
    /*
        如果返回的是一个对象，会覆盖掉实例化对象
        !!! 在构造函数中，不要使用return;
    */
}
let p = new Person();
console.log(p);

原型

/*
    一些可以在实例化对象中可以通用的数据或方法，如果我们都直接写在对象中，那每示例化一个对象，都多一堆数据，这样的话，比较占用内存

    在 JS 中,每个函数都有一个属性叫做 prototype（原型）, prototype本身是一个对象,在该对象我们可以定义一些该函数的实例化对象的公用方法

    在 JS 中，每个对象都有一个属性叫做 __proto__(原型链)， __proto__ 属性，指向该对象构造函数的原型

    原型链: 
        当我们调用对象的某个方法（属性）时，会先在该对象自身查找, 找不到，就通过对象的 __proto__ 属性，找到其构造函数的prototype对象，从这里找这个方法,如果还找不到就找 prototype (object) 的构造函数（Object）中prototype, 如果还找不到就undefined. 
*/  

原型链

// JS 中一切皆对象
// console.log(Function);    
// console.log(Object); 
// console.log(String);
// console.log(Array);   

let obj = {};
console.log(obj.toString());

function Person(name,age){
    this.name = name;
    this.age = age;
}   
Person.prototype = {
    constructor:Person,
    sayName(){
        console.log(this.name);
    }
};
let p = new Person("hello",8);
console.log(p.toString());
console.dir(Object);
// console.dir(p);
/*
    包装对象
*/
// var str = new String("123");
// var str2 = 123;
// console.log(str);
// 对象的__proto__ === 构造函数的 prototype
/* 1.对象本身找 --> 2. 对象构造函数的 prototype --> 3. Object 的 prototype */

面向对象特征

面向对象具有抽象，封装，继承，多态四大基本特性。（也有说法三大特征封装，继承，多态，这里我们不做辩论）

抽象性

什么是抽象？简单理解就是抽取功能相似的代码片段，把它归为一类。在这里我们引申出了一个新的概念类，虽然前面我们已经用到了类，但是没有把类专门拿出来说。在这里我们重新说明一个类和对象。
对象：一个封装了方法和数据（属性）的集合体，这个我们前边已经多次使用了，那类是什么呢？

类：专业点说法就是一组具有相同属性和行为的对象的抽象，只看这个貌似不太好理解，怎么理解这个类呢？以我们前边的代码为例，function Drag 这个就是一个类，我们把拖拽所需要的常用功能都封装在这个类中，每次需要需要使用到拖拽这个功能的时候，就实例化这个类，它会给我生成 一个 drag 对象，通过该对象我们就实现了拖拽这个功能。总结一下：生成拖拽对象的函数就是我们类。