JS构造函数的出现必要及原型(prototype)属性使用的必要

JS构造函数使用的必要及原型(prototype)属性使用的必要性

首先通过一系列代码的改写,来观察构造函数及原型属性的使用的必要性与重要性:

初代代码:

let obj1 = {
    name: 'Jack',
    myRun: function () {
        console.log('我是' + this.name + '我会跑');
    }
}

let obj2 = {
    name: 'Rose',
    myRun: function () {
        console.log('我是' + this.name + '我会跑');
    }
}

obj1.myRun();
obj2.myRun();

这段代码中,主要有两大问题:

问题一:每当new一个新对象,都要重新写一遍对象的结构,不灵活
问题二:在这段代码中,浪费内存资源的部分最主要的是对象里myRun函数的声明
因为每当new一个对象时,都要在堆内存中开辟一个存放此对象的内存。而在这个例子中,这段堆内存主要存放name与myRun() 两个数据。显然,name属性是必要的,用来区分每个不同对象类似于id;但是myRun()方法是可以用调用来节省空间的,也就是说只用声明一次即可,不需要每次都跟着新对象开辟一段新空间;

二代代码(解决初代代码问题一):

function person(name) { // 工厂函数,
    this.name = name;
    this.myRun = function () {
        console.log('我是' + this.name + '我会跑');
    }
}
let person1 = new person('Jack');
person1.myRun();
let person2 = new person('Rose');
person2.myRun();
这段代码中,使用了工厂函数来构造同一类对象的模板,而每次new一个obj时都可以通过这段模板来新建对象,代码复用率更高;
这段工厂函数也就是JS中所谓的构造函数,使用十分方便,通过一个function就可以创造多个对象,这里应该是JS“一切皆对象”思想;不像java 、c++这些面向对象语言,构造函数和对象使用十分繁琐

三代代码(解决初代代码问题二):

let run = function () {
    console.log('我是' + this.name + '我会跑');
}

let obj1 = {
    name: 'Jack',
    myRun: run
};

let obj2 = {
    name: 'Rose',
    myRun: run
}

obj1.myRun();
obj2.myRun();
此段代码中,run()方法只构造声明了一次,在堆内存中存放着。虽然,每new一次新的obj,都赋值了一次myRun属性,但是只是把run()方法在堆内存中的地址赋值给了每一个对象的myRun属性。所以,这个过程类似于变量赋值和引用,大大节省了内存空间相比于初代代码。

四代代码(在构造函数的基础上用原型(prototype/__ proto __)构造对象自身方法)

person.prototype.myRun = function run() {
    console.log('我是' + this.name + '我会跑');
}

function person(name) {
    this.name = name;
}
let person1 = new person('Jack');
person1.myRun();
let person2 = new person('Rose');
person2.myRun();
console.log(person2)
这段代码在内存空间效率上和三代代码差不多,但是复用率更高,因为原型的应用即是给模板对象(祖宗)构造myRun()方法,而每一个用此模板(祖宗)new的新对象(person1,person2)都会继承此方法;
现象:打印person1,person2不会有myRun()方法:

在这里插入图片描述

因为存在于__ proto __中:

在这里插入图片描述

也就是说和三代代码同理,不会为myRun开辟新内存空间。只在栈内存中调用原型中myRun()方法的堆内存地址;

(在这里Person(对象模板).prototype === person1(对象实例).__ proto __)

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值