Javascript中函数、构造函数以及原型的用法区别

痛定思痛。 2022-06-18 10:20 252阅读 0赞

1.JavaScript构造函数和其它函数的唯一区别: 构造函数是通过new操作符来调用的。也就是说如果构造函数不用new操作符来调用，那它就是普通函数，反过来说任何函数通过new操作符来调用就可以当做构造函数。

function Car(name,color,speed,type){
            this.name=name;
            this.color=color;
            this.speed=speed;
            this.type=type;
        }
        //通过new来调用
        var car1=new Car('xixi','red',2,'a');
        console.log(car1.name); //xixi
        //没用new来调用
        var car2=Car('haha','green',3,'b');
        console.log(car2.name); //报错
        console.log(window.name); // haha

2. 接下看一个通过利用prototype来定义类的例子。

prototype方式定义的函数不会拷贝到每一个实例中，所有的实例共享prototype中的定义，节省了内存。但是属性如果是对象的话，所有实例也是共享同一个对象，如上例中的drivers使用自定义对象或者数组的时候，如果其中某一个实例改变了其中的值，所有的实例的值都被改变。因为所有实例的属性指向的是同一个对象的引用，如果上面的例子中car2.drivers=\['Ivy','Lili'\];来改变实例car2的属性内容，相对于car2.drivers指向了另一个对象（这时候car2有一个实例属性，有一个prototype属性都是drivers）

>   
>

3.如果想让添加的属性或者方法能够被实例使用，要使用prototype添加，下面的例子说明了这一点

function sayHi() {  
        alert("hi");  
    }  
      
    sayHi.sayHello = function() {  
        alert("hello");  
    };  
      
    sayHi.sayHello();//outputs hello  
      
    var osayHi = new sayHi();//outputs hi  
    osayHi.sayHello(); // TypeError: osayHi.sayHello is not a function

因为不是通过在prototype中以这样的方式添加的(sayHi.prototype.sayHello),实例是不能访问sayHello方法的，只能通过sayHi.sayHello(类似如静态方法)的方式访问。同样如果添加的时候是通过prototype方式，则不能用静态方式访问。
     
     JavaScript构造函数和其它函数的唯一区别: 构造函数是通过new操作符来调用的。也就是说如果构造函数不用new操作符来调用，那它就是普通函数，反过来说任何函数通过new操作符来调用就可以当做构造函数。