js 面向对象编程

/*单例模式设计
    1,表现形式
    let obj={ 就是对象模式
        xxx：yyy
    }；
    在单例设计模式中 obj不仅仅是对象名 被称为命名空间[NameSpace]
        把描述事物的属性存放到命名空间中 多个命名空间是独立分开的
        互不冲突
    2，作用
        =>吧描述同一件事物的属性和特征进行
        ”分组，归类“(存储在同一个堆内存空间中)因此
        避免了全局变量之间的冲突和污染;
        let fn(){
            name："xx"
        };
        let fn1(){
            name:“xxx”
        }；
        两个name 是不冲突的
    3，单例设计模式命名的由来
        每一个命名空间都是js中object这个内置基类的实例 而实例之间
            都是相互独立互不干扰的所有我们称它为'单例':单独的实例
*/
/*
高级单例模式
    1,在给命名空间赋值的时候 不是直接赋值一个对象 而是先执行
        匿名函数 形成一个私有作用域(不销毁的栈内存)在AA中创建一个
        堆内存 把堆内存地址赋值给命名空间
    2，这种模式的好处 我们完全可以在aa创造的很多内容(变量OR函数)，
        那些需要提供外面调取使用 我们暴露到返回的对象中(模块化实现
        的一种思想)
*/
// let name = (function () {
//     let n = 12;
//     function fn() {
//         //...
//     };
//     return { fn: fn }
// })();
/*
   练习题:
   var n = 2;
var obj = {
    n: 3,
    fn: (function (n) {
        n *= 2;
        this.n += 2;
        var n = 5;
        return function (m) {
            this.n *= 2;
            console.log(m + (++n));
        };
    })(n)
};
var fn = obj.fn;
fn(3);
obj.fn(3);
console.log(n, obj.n);
*/

/*
this的指向
    1, 给当前元素绑定某个事件绑定方法，当事件触发方法执行的时候
        方法中的this是当前操作的元素对象
        btn.οnclick=function(){
           // this:btn
        }

    2，普通函数执行 函数中的this取决于执行的主体 谁执行的this,
    就是谁(执行主体：执行方法， 看方法名前面是否有“点”有的化前面
    是谁this就是谁 没有this 是window)
    // 例
    function fn(){ //=>aaafff
        console.log('1');
    };
    var obj={
        fn:fn//=>fn:aaafff
    };
    执行同一个方法 但是this的执行不同
    obj.fn(); 函数执行 同一个方法 fn this=>obj
    fn(): 函数执行同一个方法fn  this=>window
    （function （）{
    // =>自执行函数 this ：window
    }) ();

*/

/*
 模块化开发
    1，团队协作开发的时候，会把产品按照功能的模块；
*/
/*
js是一门编程语言(具有编程思想)；

面向对象编程 我们需要掌握 '对象'，类，实例'的概念
    对象：万物皆对象
    类：对象的具体细分(按照功能特点进行分类：大类，小类)
    实例：类中具体的一个事物(拿出类别中的具体一个实例进行研究，
        那么当前类别下的其他实例也具备这些特点和特征);
    整个js就是基于面向对象设计和开发出来的语言 我们学习和实战
    的时候也要按照面向对象的思想去体会理解
*/
/*
基于构造函数创建自定义类(constructor)
    1，在普通函数执行的基础上 new xx() 这样就不是一个普通函数
        的执行了 而是构造函数执行，当前的函数名称称之为“类名”
        接收的返回结果是当前类的一个实例
    2，自己创建的类名最好第一个单词首字符大写
    3，这种构造函数设计模式执行 主要用于组件，类库，插件，框架
    的封装 平时编写业务逻辑一般不这样处理
    function Fn() {

}
let f = new Fn();// =>Fn 是类 f是类的一个实例
var f2 = new Fn();// f2也是fn的一个实例 f2和f是独立分开的 互补影响

var obj1 = {};//=>obj1 是object的一个实例 这就是一个单例模式
var obj2 = {};//=>obj2 是object 的一个实例
*/

/*
    js中创建值得两个方式
    1,字面量表达式
    2，构造函数模式
    var obj={} =>字面量方式
    var obj1=new Object() =>构造函数模式
    不管是哪一种方式创造出来的都是object类的实例，而实例之间
    是独立分开的 所以 var xxx={} 这中模式就是js 中的单例模式
    =>基本数据类型局域两种不同的模式创建出来的值 是不同的
        基于字面量方式创建出来的值是基本类型
        基于构造函数创建出来的值是引用类型
        var num1 = 12;
var num2 = new Number(12);
console.log(typeof num1);//number
console.log(typeof num2);// object
*/
/* 普通函数执行
function Fn(){

}
Fn();
1,形成一个私有的作用域
2，形参赋值
3，变量提升
4，代码执行
5，栈内存释放问题

*/
/*
function Fn(name, age) {
    var n = 10;
    this.name = name;
    this.age - age + n;

}

var f = new Fn();
    构造函数执行
    1，创建一个私有作用域(创建一个堆内存 里面没有任何数据) 构造函数特有
    2，变量赋值
    3，变量提升
    4，遇到this.'xxx', 就把this.xxx 的变量数据在存放到私有作用域中运
        行
    5，执行完代码
    6，把私有作用域的地址默认return 出去 构造函数特有
*/
/*
构造函数细节问题
    构造函数执行 不写return 浏览器会默认返回创建的实例
    但是我们自己写了return
    1，return 是一个基本值 返回值的结果依然是类的实例 没有受到影响
    2，如果返回的是引用值 则默认返回的实例覆盖 此时接收到的结果
    就不是当前类的实例了
    =>构造函数执行的时候 尽量减少return的使用防止覆盖实例
*/
// function Fn() {
//     var n = 10;
//     return;//=> 这样的return 是结束代码执行左洋 并且不会覆盖类的实例
//     this.m = n;

// }
// var f = new Fn();
// console.log(f);

/*
原型(prototype),原型链(__proto__);
[函数]
    普通函数,类(所有的类:内置类 自己创建的类)；
[对象]
    普通对象,数组,正则,Math,实例是对象类型的(除了基本类型的字面量创建的值);
    prototype的值也是对象类型的...;
    1,所有的函数数据类型都天生自带一个属性：prototype(原型)，
        这个属性的值是一个对象，浏览器默认会给他开辟一个堆内存
    2，在浏览器给prototype 开辟的堆内存中 有一个天生自带的属性：
        constructor，这个属性存储的值是当前函数本身
    3，每一个对象都有一个__proto__的属性，这个属性指向当前实例所属类的
        prototype;(如果不能确定它是谁的实例，都是object的实例)

    原型链：
        它是一种基于__proto__向上查找的机制，当我们操作实例的某个
        属性或者方法的时候 首先找自己空间的私有属性或者方法
        1，找到了 结束查找 使用自己私有的即可
        2，没有找到 则基于__proto__找所属类的prototype如果找到就用
        这个共有的 如果没找到 基于原型上的__proto__继续向上查找 一直
        找到Object.prototype的原型为止 如果没有或者方法不存在 就返回null

*/