上次我们简单的了解关于对象的相关知识,了解到了用构造函数来创建对象,虽然构造函数十分的好用,但是会存在内存浪费的情况让我们来简单的学习一下。
在创建实例对象后,调用属性,会在内存开辟空间,属性,是简单数据类型,可以直接调用。但是方法是复杂数据类型不一样,在不同的实例对象,调用同一种方法时,内存里其实开辟了两个空间来存放相同的方法。我们看看下面的代码。
function Xiyouji(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.major = function () {
console.log("打妖怪");
};
}
const swk = new Xiyouji("孙悟空", "男", 19);
const zbj = new Xiyouji("猪八戒", "男", 18);
console.log(zbj.major === swk.major); //显示false
那我们该如何解决这样的问题呢,其实在js中我们每个构造函数里都有prototype属性,指向另一个对象,这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。
function Xiyouji(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.major = function () {
console.log("打妖怪");
};
}
console.dir(Xiyouji);
实现效果
这样我们就可以把不需要改变的方法来写到prototype属性里,来看代码
function Xiyouji(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
Xiyouji.prototype.major = function (value) {
console.log(value);
};
const swk = new Xiyouji("孙悟空", "男", 19);
const zbj = new Xiyouji("猪八戒", "男", 18);
console.log(zbj.major === swk.major);
//结果显示为 true
这里又出现了一个问题? 我将major 这个方法定义在构造函数Xiyouji中的prototype里,为什么swk这个实例对象可以接收到呢?
这是因为实例对象中有对象原型__proto__他指向我们构造函数Xiyouji的prototype,他们是相等的。来看代码
function Xiyouji(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
Xiyouji.prototype.major = function (value) {
console.log(value);
};
const swk = new Xiyouji("孙悟空", "男", 19);
console.log(swk.__proto__ === Xiyouji.prototype);
//结果显示true
在我们的对象原型__proto__和构造函数prototype中都有构造函数constructor 他用来指向构造函数本身。
function Xiyouji(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
Xiyouji.prototype = {
constructor: Xiyouji,
major(value) {
console.log(value);
},
show() {
console.log("我们来showshowway");
},
};
const swk = new Xiyouji("孙悟空", "男", 19);
console.log(Xiyouji.prototype);
console.log(swk.__proto__);
如果我们修改了原来的对象原型,给原型对象赋值的是一个对象,则需要手动指向constructor构造函数
感谢看完的小伙伴,努力学习定会学有所成,相信自己最难不过坚持加油持续下去,明天的你会更好。你只管努力,剩下的交给时间。