JavaScript基础知识补习（3）

（声明：仅仅为博主的学习记录整理）

2018/8/17 杂乱整理

---

使用工厂方法创建对象

        //使用工厂方法创建对象 批量创造嘛
        function createPerson(name,age,gender){
            //创建一个新的对象
            var obj = new Object();
            //添加属性
            obj.name = name ;
            obj.age = age ;
            obj.gender = gender ;
            obj.sayName = function(){
                alert(this.name);       //obj.name 还记得this的用法吗
            };
            //将新的对象返回
            return obj;
        }
        var obj2 = createPerson("dd",23,"nan");
        var obj3 = createPerson("aa",22,"nv");
        console.log(obj2);   //{name: "dd", age: 23, gender: "nan", sayName: ƒ}             
        console.log(obj3);   //{name: "aa", age: 22, gender: "nv", sayName: ƒ}
        obj2.sayName();

---

构造函数
创建一个构造函数，专门用来创建Person对象
构造函数就是一个普通的函数，创建方式和普通函数没有区别
不同的是构造函数习惯上首字母大写

构造函数和普通函数的区别就是调用方式的不同
普通函数就是直接调用，而构造函数要使用new关键字来调用

      * 构造函数的执行流程
      *     1.立刻创建一个新的对象
      *     2.将新建的对象设置为函数中this，在构造函数中可以使用this来引用新的对象
      *     3.逐行执行函数中的代码
      *     4.将创建的新对象作为返回值返回
      *
      *   使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数成为一个类
      *     我们将通过对象创造实例

function Person(name,age,gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayName = function(){
                alert(this.name);
            };
        }

            function Dog(name,age){
            this.name = name;
            this.age = age;
            this.say = function(){
                alert("wang");
            };
        }


        var per  = new Person(11,22,33);
        var per2 = new Person("dd",21,"dd");
        var per3 = new Person("san",22,"ii");

        var dog = new Dog("san",22);
        var dog2 = new Dog("luck",22);

        console.log(per);
        console.log(per2);
        console.log(per3);

        console.log(dog);
        console.log(dog2);

        //使用instanceof可以检查一个对象是否是一个类的实例
        // 语法：
        //          对象 instanceof 构造函数
        //如果是，则返回TURE，反之FALSE
        console.log(per instanceof Person);
        console.log(dog instanceof Person);
        /*
         *所有的对象都是Object的后代
         *所以任何对象和Object做instanceof检查时都会返回ture
         *
         */
        console.log(per instanceof Object);

上头的例子中还有一个问题，构造函数每执行一次，就会创建一个新的sayName方法和say方法，这样他执行多少次就会创建多少个，然而完全没必要这样，所以我们可以将这两个方法在全局作用域中定义。

做如下改动
this.sayName = fun;
//--将方法在全局作用域中定义--
function fun(){
                alert(this.name);
        };

上头那样的改动又引入了一个问题
将函数定义在全局作用域，污染了全局作用域的命名空间
而且定义在全局作用域中也很不安全
比如fun在以后的命名中一旦再出现就会覆盖掉原来的fun
所以尽量不要在全局作用域中定义函数

---

原型对象 protorype

1. 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
   这个属性对应着一个对象，这个对象就是我们所谓的原型对象
   如果函数作为普通函数调用prototype没有任何作用

2. 当函数以构造函数的形式调用时，它所创建的对象中都会有个一个隐含的属性，指向该构造函数的原型对象，我们可以通过 _ proto_ 来访问该属性

** 原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象
我们可以将对象中共有的内容，统一设置到原型对象中
**当我们访问对象的一个属性或方法时，它会先在对象自身中找，有就用，没有再去原型对象中找

//代码就可以这么修改 
//删除this.sayName = fun;
Person.prototype.sayName = function(){
                alert(this.name);
            };

---

用代码了解原型链的基本原理

    function MyClass(){

    }

    //向原型对象中添加name
    MyClass.prototype.name = "i'm prototype name";

    var mc = new MyClass();
    //在自己的对象中找不到，就去原型对象中找，找到了就用。 
    //console.log(mc.name);   //i'm prototype name
    //使用in检查对象中是否有某个属性时，如果对象中没有，但是原型中有，也会返回ture
    console.log("name" in mc);   //ture

    //可以使用对象的hasOwnProperty（） 来检查对象自身中是否有该属性
    console.log(mc.hasOwnProperty("age"));              //false

    //那我们也没有定义hasOwnPropery，这个是从哪儿来的呢，我们去找找
    console.log(mc.hasOwnProperty("hasOwnProperty"));               //flase
    console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));     //flase

    //原型对象也是对象，所以它也有原型
    //当我们使用一个对象的属性或方法时，会在自身中寻找
    //自身中如果没有则去原型对象中找
    //还是没有就去原型的原型中寻找，直到找到object对象的原型
    //Object对象的原型没有原型。如果在其中依然没有找到，则返回undefined
    console.log(mc.__proto__.__proto__);           //{constructor: ƒ, __defineGetter__: ƒ, …}
    console.log(mc.__proto__.__proto__.__proto__); //到头了 null

---

toString
当我们直接在一个页面中打印一个对象时，实际上是输出对象的toString（）方法的返回值

对于toString在哪儿我们可以自行去代码中寻找答案

     console.log(per.hasOwnProperty("toString"));
     console.log(per.__proto__.hasOwnProperty("toString"));
     console.log(per.__proto__.__proto__.hasOwnProperty("toString"));

下面是一个通过prototype来修改toString的内容的用法

function Person(name,age,gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    Person.prototype.toString = function(){
        return "我是"+this.name+"我今年"+this.age+"我是"+this.gender;
    };

    var per = new Person("悟空",12,"男");
    var per2 = new Person("bajie",12,"男");

     var result = per.toString();  //result = 我是悟空我今年12我是男
     console.log("result = "+ result);

     console.log(per);  //我是悟空我今年12我是男
     console.log(per2);

---

数组（Array）
内建对象，宿主对象，自定义对象

-数组也是一个对象
-他和我们普通对象的功能类似，也是用来储存一些值
-不同的是普通对象是使用字符串作为属性名的
而数组是使用数字来作为索引操作元素
索引（index） —> 从零开始的整数
-数组的储存性能比普通对象要好，在开发中我们经常是用数组来储存一些数据

向数组的最后一个位置添加元素
语法：数组[数组.length] = 值

以下为几个常用的Array对象属性
   ---其他的还需要自行查阅

push()
* - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
* - 可以将要添加的元素作为方法的参数传递
* 这样这些元素将会自动添加到数组末尾
* - 该方法会将新的数组长度作为返回值返回

var result = arr.push("1","2","3");

pop()
* -该方法可以删除数组的最后一个元素
* 并将被删除的元素作为返回值返回

arr.pop();

unshift()
* - 向数组开头添加一个或多个元素，并返回新的数组长度
* - 向前面插入元素以后，其他元素索引会依次调整

arr.unshift("jj");

shift()
* -删除并返回数组的第一个元素

arr.shift();

使用字面量创建一个数组

        var arr = [0,1,2,3,4,5];
        console.log(arr);

注意一下这个，两者是不同意思

            arr = [10];             
            console.log(arr);     //10 -->arr[0]=10

            arr2 = new Array(10);       
            console.log(arr2);    //,,,,,,,,, 创建了一个长度为10的数组！

slice()和splice()

var arr = ["白宇","朱一龙","吴磊","刘浩然","沈月"];
            /*
             * slice()
             *  -从已有的数组提取指定的元素
             *  -该方法不会改变元素数组，而是将截取到的元素封装到一个新的数组中返回
             *  -参数：
             *      1.截取开始的位置的索引，包含开始索引
             *      2.截取结束的位置的索引，不包含结束索引
             *          -可以使用负数
             *              -1 倒数第一个索引 -2，-3以此类推
             */

            var result = arr.slice(0,3);
            console.log(result);

            var result1 = arr.slice(3)
            console.log(result1);

            var result2 = arr.slice(0,-1)
            console.log(result2);

            /*
             * splice()
             *  -可以用于删除数组中的指定元素
             *  -使用splice()会影响到原数组，会将指定元素从数组中删除
             *      并将被删除的元素作为返回值返回
             *  -参数：
             *      第一个参数 表示开始位置的索引
             *      第二个参数 表示删除的数量
             *      第三个参数及以后 
             *          可以传递新的元素，这些元素将会自动插入到开始位置的索引前面
             */

            var result3 = arr.splice(2,1,"沈巍","面面");
            console.log(arr);
            console.log(result3);

forEach()方法
* 需要一个函数作为参数
* - 函数由我们创建但是不是由我们调用，称为回调函数
* - 数组中有几个元素函数就会执行几次,每次执行时，浏览器会将遍历到的元素
* 以实参的形式传递进来，我们可以来定义形参，来读取这些内容
* -浏览器会在回调函数中传递三个参数
* 第一个参数，就是当前正在遍历的元素
* 第二个参数，就是当前正在遍历的元素的索引
* 第三个参数，就是正在遍历的数组

/*
             * 一般我们都是用for循环去遍历，JS中还为我们提供了一个方法来遍历数组
             * forEach()
             *      -!!只支持IE8以上的浏览器!!
             */
            //创建一个数组
            var arr = ["s","z","s"];

            arr.forEach(function(value , index , obj){      //回调函数
                //console.log("hello")
                console.log("value = " + value);
                console.log("index = " + index);
                console.log(" obj = " + obj );
                console.log(arr == obj);

            });

---

垃圾回收（GC）
* -程序运行过程中也会产生垃圾
* 垃圾过多会导致程序运行速度过慢
* 所以需要GC
*
* -当一个变量没有任何的变量或属性对他进行引用，此时我们将永远无法操作此对象
* 此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，
* 所以这种垃圾必须进行清理
* -在JS中拥有自动的垃圾回收机制，会自动的将这些垃圾对象从内存中销毁，
* 我们也不需要也不能进行垃圾回收的操作
* -我们需要做的只是要将不再使用的对象设置为null即可

---

去重数组练习

//我的思路 先排序后删除
    var arr = [1,2,3,2,1,4,5,2,1,3,2,3,6,7,3,8];
    function Delet(a){

                for(var i = 0 ; i < a.length ; i++)
                {
                a.sort();
                //去重
                if(a[i]==a[i+1])
                    {
                        a.splice(i,1);
                        i--;
                    }
                }                   
                console.log(a);
            }


        Delet(arr);

//老师的思路

        /*
         * 取第一个元素和后面的元素比 
         */
        var arr = [1,2,3,2,1,4,5,2,1,3,2,3,6,7,3,8];
        for(var i = 0 ; i < arr.length ; i++ )
        {
            for(var j = i+1 ; j<arr.length; j++)
            {
                if(arr[j] == arr[i])
                {
                    arr.splice(j,1);
                    j--;    
                }
            }
        }
        console.log(arr);