js高级之构造函数与原型

阿牛乐
已于 2024-08-06 15:17:03 修改
阅读量45
点赞数
分类专栏： javaScript 文章标签： javascript 原型模式前端
于 2023-03-28 22:21:12 首次发布
本文链接：https://blog.csdn.net/weixin_47976412/article/details/129826126
版权
javaScript 专栏收录该内容
9 篇文章 0 订阅
订阅专栏
                    
                        
                    
                    构造函数和原型 
new在执行时会做四件事： 
  在内存创新的空对象；
让this指向这个新的对象；
执行构造函数里的代码，给新对象添加属性和方法；
返回新对象
 
成员 
  实例成员：在构造函数内部创建的对象成员称为实例成员，(this)由实例化对象来访问
静态成员：在构造函数本身上添加(Star.sex)的成员，只能由构造函数本身访问<script>
        // 构造函数中的属性和方法我们称为成员, 成员可以添加
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
            this.sing = function() {
                console.log('我会唱歌');

            }
        }
        var ldh = new Star('刘德华', 18);
        // 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
        // 实例成员只能通过实例化的对象来访问
        console.log(ldh.uname);
        ldh.sing();
        // console.log(Star.uname); // 不可以通过构造函数来访问实例成员
        // 2. 静态成员 在构造函数本身上添加的成员  sex 就是静态成员
        Star.sex = '男';
        // 静态成员只能通过构造函数来访问
        console.log(Star.sex);
        console.log(ldh.sex); // 不能通过对象来访问
</script>
 
 
原型prototype：一个对象；写在构造函数外；Star.prototype 
  作用：可以共享的方法；
一般情况下，我们的公共属性定义到构造函数里，公共的方法放到原型对象上
 
对象原型： 
  对象原型__proto__,对象都会有一个属性__proto__指向构造函数的prototype原型对象，(ldh)对象可以使用构造函数prototype原型对象(里面的this指向实例对象)的属性和方法
 
构造函数：constructor 
  对象原型(proto)和构造函数原型对象(prototype)里面都有一个属性constructor属性
利用constructor这个属性指回原来的构造函数（修改了原型对象prototype，即给原型对象赋值的是一个对象，必须手动的利用constructor指回原来的构造函数）
 
构造函数、实例、原型对象三者之间的关系
 <script>
    function Star(uname, age){
        this.uname =  uname;
        this.age = age;

    }
    Star.prototype={
        //必须利用constructor指向原来的构造函数
        constructor:Star,
        sing:function(){
            console.log('我会唱歌');
        },
        dance:function(){
            console.log('我会跳舞');
        }
    }
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 18);
    // console.log(ldh);  Star {uname: "刘德华", age: 18}
    //如果被覆盖了(17行没有constructor:Star)就输出不了constructor
    console.log(Star.prototype); // 指向Star原型对象
    console.log(ldh.__proto__); // 指向Star原型对象
    // console.log(Star.prototype.constructor); // Star构造函数
    // console.log(ldh.__proto__.constructor); // Star构造函数
</script>
 
原型链
 
JavaScript的成员查找机制(规则) 
  当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性
如果没有就查找它的原型(也就是proto指向的prototype原型对象)
如果没有就查找原型对象的原型(Object的原型对象)
以此类推一直找到Object为止(null)
 
扩展内置对象方法<script>
    //原型对象的应用 扩展内置对象
    Array.prototype.sum = function () {
        var sum = 0;
        for (var i = 0; i < this.length; i++) {
            sum += this[i]
        }
        return sum;
    }
    //不能直接赋值下面
    /* Array.prototype = {
        sum: function () {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i]
            }
            return sum;
        }
    } */
    var arr = [1, 2, 3]
    var arr1 = new Array(11, 22, 33);
    console.log(Array.prototype);
    console.log(arr1.sum());
    console.log(arr.sum());
</script>
 
 
继承 
说明：ES6之前没有extends继承，可以通过构造函数+原型对象模拟实现继承称为组合继承
 
call()：可调用这个函数，并且修改函数运行时的this指向 
  借用父构造函数继承属性fn.call(thisArg(this指向的对象),arg1,arg2...传参)
function.fn(x, y){}
var o = {name = 'andy'};
fn.call(o,1,2)

<script>
    function Father(uname, age){
        this.uname = uname;
        this.age = age;
    }
    function Son(uname, age, score){
        //this指向子构造函数的实例对象,继承父属性
        Father.call(this, uname, age)
        this.score = score;
    }
    var son = new Son('刘德华', 18, 100);
    console.log(son);
</script>
 
借用原型对象继承<script>
    function Father(uname, age){
        this.uname = uname;
        this.age = age;
    }
    Father.prototype.money = function(){
        console.log(1000000);
    }
    function Son(uname, age, score){
        //this指向子构造函数的实例对象
        Father.call(this, uname, age)
        this.score = score;
    }
    // Son.prototype = Father.prototype; 这样直接赋值会有问题，如果修改了子原型对象，父原型对象也会一起改变
    //利用原型链将Son的原型对象指向Father的实例对象，实例对象再查找Father.prototype原型对象
    Son.prototype = new Father();
    //利用对象形式修改了原型对象，别忘了利用constructor重新指回原来的原构造函数
    Son.prototype.constructor = Son;
    var son = new Son('刘德华', 18, 100);
    console.log(son);
    console.log(Father.prototype);
    console.log(Son.prototype.constructor);//指回Son函数
</script>
    
打印
Son
age: 18
score: 100
uname: "刘德华"
__proto__: Father

Object
money: ƒ ()
constructor: ƒ Father(uname, age)
__proto__: Object

ƒ Son(uname, age, score){
   //this指向子构造函数的实例对象
    Father.call(this, uname, age)
    this.score = score;
}
 
 
 
ES5新增的方法 
forEach：迭代(遍历)数组arr.forEach(function(currentvalue当前的值, index, array){})
 
filter()方法创建一个新的数组，符合条件的所有元素，主要用于筛选数组，返回一个新的数组，返回一个新的数组var newArr = arr.filter(function(value, index, array){
	return value >= 20;
})
 
some()方法用于检测是否有满足条件的，返回布尔值true, false；如果找到第一个满足条件的元素，则终止循环，不在查找var flag = arr.some(function(value, index, array){
	return value >= 20;
});
console.log(flag)
 
字符串方法 
  trim()方法去除字符串两侧空格，返回新的字符串
 
对象方法： 
  Objcet.keys(obj)：用于获取对象自身所有的属性，返回属性名组成的数组，效果类似for…in…
Object.defineProperty(obj目标对象, prop修改的属性名, {})：定义新属性或修改原有属性{}里面的参数：
value:修改或加属性值
writable:false,不允许修改属性值
enumerable:false,能否被遍历，默认false不能
configurable:false,不允许删除或是否能再次修改特性
 
 

                