JavaScript构造函数和原型

最新推荐文章于 2024-11-17 14:19:36 发布

原创最新推荐文章于 2024-11-17 14:19:36 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨JavaScript构造函数的定义及使用，解析实例成员与静态成员的区别，讲解如何优化构造函数以节省内存，以及对象如何通过原型链访问方法。

构造函数

function(name,age){
   this.name=uname;
   this.age=age;
   this.sing=function{
     console.log("我会唱歌");
}
Star.sex='男';

静态成员只能通过构造函数访问
静态成员:构造函数上的成员如sex

Star.sex;
错误：lhd.sex

实例成员只能通过实例化对象访问
实例成员:构造函数内通过this添加的成员,如：name age sing

lhd.sex
错误：Star.sex

问题：new100个对象，创造100个sing函数，浪费空间
解决方法：把共享方法放在prototype这个对象里

prototype：原型对象，共享方法。

 function(name,age){
   this.name=uname;
   this.age=age;
}
Star.sex='男';
Star.prototype.sing=function(){
   console.log('我会唱歌');
}

对象为什么访问原型对象？

因为每个对象有一个默认 proto 原型对象属性。指向prototype。所以都可以用这个对象。
ldh.proto===Star.prototype

如果修改了原型对象，必须手动手动用consreuctor指回原构造函数

Star.prototype={
    constructor: Star;//指回原构造函数。
}

在这里插入图片描述

那star里的原型对象有吗

star的prototype指向object原型对象
object的prototype指向null

在这里插入图片描述
实例对象-原型对象找-object原型对象-如果object没有则为null
按照原型链一层一层查找

如：Object的tostring方法
所以所有实例对象可以用toString()

this指向

1.在构造函数中,this指向对象实例
2.构造函数原型对象this指向对象实例

扩展内置对象

        Array.prototype.sum=function() {
            // this指向sum调用者，也就是Array
            for(var i=0;i<this.length;i++){
                sum+=this[i];
            }
            return sum;
        }

错误方法：这样覆盖了prototype继承自object的方法

        Array.prototype={
            // this指向sum调用者，也就是Array
            sum：function(){