JavaScript高级第二章

01-构造函数和普通函数区别

---

  // 总结:普通函数和构造函数的区别
        // 普通函数:主要做业务逻辑处理
        // 构造函数:构造实例化对象,首字母大写
        function GirlFriend(name, age) {
            // 实例成员
            this.name = name;
            this.age = age;
            this.cooking = function() {
                console.log('会做饭');
            }
        };
        // 实例对象
        var girl1 = new GirlFriend('罗莎1', 20);
        var girl2 = new GirlFriend('罗莎2', 22);
        console.log(girl1);

02-构造函数成员分类~实例成员-静态成员

---

  // 总结:普通函数和构造函数的区别
        // 普通函数:主要做业务逻辑处理
        // 构造函数:构造实例化对象,首字母大写
        function GirlFriend(name, age) {
            // 实例成员
            this.name = name;
            this.age = age;
            this.cooking = function() {
                console.log('会做饭');
            }
        };
        // 实例对象
        var girl1 = new GirlFriend('罗莎1', 20);
        var girl2 = new GirlFriend('罗莎2', 22);
        console.log(girl1.name);
        // 静态成员,在构造函数本身上添加的成员，只能由构造函数本身来访问
        GirlFriend.height = '176';
        // 通过构造函数直接访问
        console.log(GirlFriend.height);
        console.log(girl1.height);
        // 构造函数实例对象
        console.dir(GirlFriend);
        console.log(girl1);

03-构造函数的原型对象（原型）

---

// 总结:普通函数和构造函数的区别
        // 普通函数:主要做业务逻辑处理
        // 构造函数:构造实例化对象,首字母大写
        function GirlFriend(name, age) {
            // 实例成员
            this.name = name;
            this.age = age;
            this.cooking = function() {
                console.log('会做饭');
            }
        };
        // 实例对象
        var girl1 = new GirlFriend('罗莎1', 20);
        var girl2 = new GirlFriend('罗莎2', 22);
        var girl3 = new GirlFriend('罗莎3', 22);
        var girl4 = new GirlFriend('罗莎4', 22);
        console.log(girl1);
        // 原型对象必须会流利背会
        // 原型定义:每一个构造函数都有一个prototype属性,prototype是一个对象属性，其属性值为对象，称为原型对象
        // 目的:构造函数通过原型分配的函数是所有对象所共享的。
        GirlFriend.prototype.singing = function() {
            console.log('会唱歌');
        };
        // console.log(girl1);
        // console.log(girl2);
        // console.log(girl3);
        // console.log(girl4);
        girl1.singing();
        girl2.singing();
        girl3.singing();
        girl4.singing();

        console.dir(Array);
        var arr1 = new Array();
        console.log(arr1);

04-对象的原型

---

 每一个对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，
 之所以实例化对象可以使用构造函数 prototype 原型对象的属性和方法，
就是因为对象有 __proto__ 原型的存在。
        var arr1 = new Array(1, 2);
        console.dir(Array);
        console.log(arr1);
        console.log(arr1.__proto__);
        console.log(arr1.__proto__ == Array.prototype);
        console.log(arr1.__proto__.concat('a'));
        console.log(arr1.concat('b'));

05-construtor构造函数

---

  // 总结:普通函数和构造函数的区别
        // 普通函数:主要做业务逻辑处理
        // 构造函数:构造实例化对象,首字母大写
        function GirlFriend(name, age) {
            // 实例成员
            this.name = name;
            this.age = age;
        };
        // 为构造函数创建原型的方法
        GirlFriend.prototype.singing = function() {
            console.log('会唱歌');
        };
        // 实例对象
        var girl1 = new GirlFriend('罗莎1', 20);
        console.log(girl1);
        // constructor:用于记录该对象引用于那个构造函数,它可以让原型重新指向原来的构造函数
        console.log(GirlFriend.prototype.constructor);

06-原型链

---

function Person(name, age) {
            // 属性
            this.name = name;
            this.age = age;
            // this.say = function() {
            //     console.log('实例成员的say');
            // }
        };
        // 方法
        Person.prototype.say = function() {
            console.log('原型的say');
        };
        Person.prototype.run = function() {
            console.log('跑步');
        };
        // 当访问一个对象的某个属性或方法时，会先在这个对象本身属性上查找，如果没有找到，则会去它的`__proto__`上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的`__proto__`中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。
        // 实例化
        var p1 = new Person('马鹏飞', 20);
        p1.say();
        console.log(p1);
        p1.toString();
        console.log(p1.wangwenbo);

07-判断属性是否在自身还是原型链上

---

  function Person(name, age) {
            // 属性
            this.name = name;
            this.age = age;
            // this.say = function() {
            //     console.log('实例成员的say');
            // }
        };
        // 方法
        Person.prototype.say = function() {
            console.log('原型的say');
        };
        // Object.prototype.hasOwnProperty(prop)方法:判断属性是否属于自身还是原型链上的
        var p1 = new Person('momoko', 20);
        console.log(Object.prototype.hasOwnProperty('say'));
        console.log(p1.hasOwnProperty('say'));

08-理解应用

---

        console.log(localStorage);
        // 可以遍历自身和原型链上可枚举的属性和方法
        for (var key in localStorage) {
            if (localStorage.hasOwnProperty(key)) {
                console.log(key);
            }
        };
        // 该方法会返回一个由一个给定对象的自身(可枚举)属性组成的数组
        console.log(Object.keys(localStorage));
        console.log('clear' in localStorage);

09-判断对象是否存在于另一个对象的原型链上

---

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

        function Computer(brand, color) {
            this.brand = brand;
            this.color = color;
        };
        // Object.prototype.isPrototypeOf(Object)方法:判断一个对象是否存在于另一个对象的原型链上
        var p1 = new Person('翠花', 20);
        var c1 = new Computer('mac', 'silver');
        console.dir(Person);
        console.dir(p1);
        console.log(Person.prototype.isPrototypeOf(p1));
        console.log(Person.prototype.isPrototypeOf(c1));

10-构造函数中的原型对象的this指向

---

  function Person(name, age) {
            this.name = name;
            this.age = age;
        };
        Person.prototype.singing = function() {
            console.log('唱歌');
            // 构造函数中的this指向和原型对象的this指向,都是实例化对象
            console.log(this);
        };
        var p1 = new Person('翠花', 20);
        p1.singing();

11-通过原型对象扩展内置的构造函数的方法

---

        // console.dir(Array);
        // var arr1 = [1, 2, 3, 4, 5];
        // console.log(arr1.sum);
        // 为构造函数(内置/自定义)原型添加方法,让实例化对象进行使用
        Array.prototype.sum = function() {
            // console.log(this);
            var rel = 0;
            for (var i = 0; i < this.length; i++) {
                rel += this[i];
            }
            return rel;
        };
        var arr1 = [1, 2, 3, 4, 5];
        var arr2 = [6, 7, 8, 9];
        // console.log(arr1);
        console.log(arr1.sum());
        console.log(arr2.sum());

        1.普通函数和构造函数的区别
        2.构造函数的成员分类:实例成员和静态成员
        3.原型对象(原型)
        4.__proto__对象的原型
        5.constructor构造函数用来指回原构造函数
        6.原型链
        7.给内置构造函数原型添加方法:可以让实例化对象都拥有这个方法(理解)