构造函数方法与原型链方法的区别

abuanden

于 2021-03-22 15:36:36 发布

阅读量376

点赞数

分类专栏：技能树 # JavaScript基础

本文链接：https://blog.csdn.net/abuanden/article/details/115081390

版权

技能树同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JavaScript基础

18 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript ES5中构造函数与原型的区别。在创建实例后，构造函数内的方法会为每个实例占用独立的内存空间，而原型上的方法则被所有实例共享，节省内存。当修改构造函数内的方法时，不会影响其他实例，但改变原型方法会影响到所有实例。通过示例展示了这两种方式在实例化和方法重写时的行为差异。

摘要由CSDN通过智能技术生成

ES5的解释

在new一个实例之后，他的实例可以调用构造函数和prototype上面的方法。
但是不同的是，定义在构造函数里面的方法，会在每一个实例里面创建一个函数，占用空间。每个实例的test方法指向不同内存。而prototype中的方法，只占用一块内存，所有实例指向他，节约空间。

    function Cat(x,y) {
        this.test1 = () => {
            console.log("我是1");
        }
    }

    Cat.prototype.test2 = () => {
        console.log("我是2");
    }
    var car = new Cat()
    console.log(car.test1());//我是1
    console.log(car.test2());//我是2
	console.log(car1.test1 == car.test1);//false

构造函数里面的方法，重写之后不会改变其他实例。而定义在prototype上，所有实例共享这个方法，所以改变prototype的方法之后，所有实例的方法都改变了。

    function Cat(x,y) {
        this.test1 = () => {
            console.log("我是1");
        }
    }
    var car = new Cat()
    var car1 = new Cat()
    car1.test1 = ()=>{
        console.log("我才不是1呢");
    }
    console.log(car.test1());//我是1
    console.log(car1.test1());//我才不是1呢