前端全栈学习第十五天-js高级-第三天:实例对象，原型对象，拷贝

我就是我 2021-09-18 15:46 236阅读 0赞

1：原型

2：继承

3：函数

1：原型
    1.1概念：每个实例对象都有一个属性__proto__,是原型，浏览器使用，不标准的属性
    每个构造函数都有一个属性prototype,是原型，程序员使用
    1.2：原型链：实例对象和原型对象之间的关系，通过__proto__，prototype来链接
    1.3原型指向是否可以改变(方法)：通过改变构造函数的原型对象来改变构造函数创建的实例对象指向。(如果原型改变，还想在此原型添加方法，那么在改变原型之后添加方法)
    举例：
    (function () {
        function People() {
    
        }
    
        People.prototype.eat = function () {
            console.log("吃饭饭")
        }
    
        function Student() {
    
        }
    
        Student.prototype = new People(); //改变了Student的原型指向，现在指向了People的实例对象。
        // People的实例对象中有__proto__属性(方法),他指向People的原型对象(prototype),
        // 此时Student就可以访问People原型的方法。然后实例化Student。此时实例对象就可以调用People原型里面的方法
        var stu = new Student();
        stu.eat();
    }());
    1.4原型最终指向了哪里
    (function () {
        function Person() {
    
        }
    
        Person.prototype.eat = function () {
    
        }
        var per = new Person()
        console.log(per.__proto__ == Person.prototype); //true
        console.log(Person.prototype.__proto__ == Object.prototype); //true
        console.log(Object.prototype.__proto__); //null
    }())
    1.5实例对象和原型对象重名问题
    (function () {
        function Person(eat) {
            this.eat = eat;
        }
    
        Person.prototype.eat = "吃"
        var per = new Person("实例吃");
        console.log(per.eat); //实例吃
    
    }());
    实例对象和原型对象重名问题如果逆推，其实就是原型链。一层一层的搜索
    实例对象访问的属性，现在实例对象中找，找到了，直接使用。找不到，就去创建实例对象的构造函数中的原型对象中去找。知道使用，找不到，undefinde.因为js是一门动类型的语言，对象没什么，就.什么。但是.了没有赋值，就是undefined
    1.6原型的作用：
    1）数据共享，节省内存空间
    2）继承---其实目的也是数据共享，节省内存空间
    2.1通过原型继承(方法)
    代码：
     function People() {
    
        }
    
        People.prototype.eat = function () {
            console.log("吃饭饭")
        }
    
        function Student() {
    
        }
    
        Student.prototype = new People(); //改变了Student的原型指向，现在指向了People的实例对象。
        // People的实例对象中有__proto__属性(方法),他指向People的原型对象(prototype),
        // 此时Student就可以访问People原型的方法。然后实例化Student。此时实例对象就可以调用People原型里面的方法
        var stu = new Student();
        stu.eat();
    }());
    2.2通过借用构造函数继承(属性)
    构造函数名字.call(this,属性，属性，属性)
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
    </body>
    <script>
        //借用构造函数:构造函数名字.call(当前对象,属性，属性，属性)
    //    解决了属性继承，和值不重复的问题，但是父级类别中的方法不能继承
        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        Person.prototype.play = function () {
            console.log("完去吧")
        }
        function Student(name, age, sex, scroce) {
            this.scroce = scroce;
            Person.call(this, name, age, sex)
        }
        //    Student.prototype = new Person("小明", 12, "男")
        var st1 = new Student("小红", 12, "女", 45);
        console.log(st1.name, st1.age, st1.sex, st1.scroce);
        var st2 = new Student("小明", 15, "男", 89);
        console.log(st2.name, st2.age, st2.sex, st2.scroce);
        var st3 = new Student("强子", 45, "女", 100);
        console.log(st3.name, st3.age, st3.sex, st3.scroce);
    </script>
    </html>
    2.3 组合继承
    原型继承和通过借用构造函数继承结合
    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    Person.prototype.eat = function () {
        console.log("完去吧")
    }
    function Student(name, age, sex, scroce) {
        this.scroce = scroce;
        Person.call(this, name, age, sex)
    }
    Student.prototype = new Person();
    Student.prototype.play = function () {
        console.log("吃东西");
    }
    var st1 = new Student("小红", 12, "女", 45);
    console.log(st1.name, st1.age, st1.sex, st1.scroce);
    st1.play();
    st1.eat();
    var st2 = new Student("小明", 15, "男", 89);
    console.log(st2.name, st2.age, st2.sex, st2.scroce );
    st2.play();
    var st3 = new Student("强子", 45, "女", 100);
    console.log(st3.name, st3.age, st3.sex, st3.scroce);
    st3.play();
    2.4拷贝继承
    把一个对象的属性和方法，直接复制一份给另一个对象
    (function () {
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
    
        Person.prototype.name = "晓东";
        Person.prototype.age = 12;
    
        var obj = {};
        for (var key in Person.prototype) { //注意这里是构造函数的原型，因为赋值是在原型里面赋值的
            obj[key] = Person.prototype[key];
        }
        console.log(obj.name + "和" + obj.age);//晓东和12
    }())
    3.1函数的角色
    函数的声明----命名函数
    函数表达式---匿名函数
    函数声明在if-else里面，如果在ie8里面运行，会出问题。所以用函数表达式好
    var ff;
        if(true){
            ff = function (){
                console.log("我是f1")
            }
        }
        else{
           ff= function (){
                console.log("我也是")
            }
        }
        ff(); //以后宁愿用函数表达式也不用函数声明
    //函数声明如果放在if-else,在ie8下会出问题
    3.2this的指向
    普通函数，this指向window对象
    
    构造函数，原型对象中的this都指向实例对象。
    对象.方法指向当前实例对象
    定时器this指向window对象
    3.3 怎么区分函数和对象
    如果一个对象中有实例对象的原型__proto__，但是没有构造函数的原型对象prototype就说明是对象
    (function () {
        console.dir(Math);
       
    }());
    
    
    var per= new Person()
    console.dir(Person);
    
    
    3.4数组中函数的调用
    (function () {
            var arr = [
                function () {
                    console.log("哈哈")
                },
                function () {
                    console.log("哈哈")
    
                }, function () {
                    console.log("哈哈")
    
                }, function () {
                    console.log("哈哈")
    
                },
            ];
    //        回调函数-函数作为参数使用
            arr.forEach(function (ele) {
                ele();
            })
        }());