这篇文章主要介绍“JS构造函数和实例化的关系及原型引入举例分析”,在日常操作中,相信很多人在JS构造函数和实例化的关系及原型引入举例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS构造函数和实例化的关系及原型引入举例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
当我们的编程是面向对象的时候,先是抽象的过程=>然后实例化的过程,比如我们抽象一个人,我知道一个人的基本信息。名称,年龄,性别,....等等
我们把先是抽象的,在抽象完成后,我们在实例化。
//这个自定义的构造函数在抽象 function Person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; this.say=function(){ console.log("我叫",name) } } // 这个过程是实例化 let per1=new Person('司藤',300,'女'); per1.say();//调用 //let per1=new Person('司藤',300,'女');
通过上面这一行代码。
我们可以得出一个结论:
构造函数与实例对象之间的关系是:
实例对象需要通过构造函数来创建的。
同时:我们可以知道实例对象的构造器就是构造函数
我们来证明这一句话是否正确;上面的代码不改变。
console.log( per1.constructor===Person ) //返回的是true
充分说明:实例对象的构造器就是构造函数这一句话是正确的。
function Person(name,age,like) { this.name=name; this.age=age; this.like=like; this.say=function(){ console.log('我可以不吃饭'); } } var per1=new Person("司藤",300,'耍'); var per2=new Person('白浅','10000','耍'); per1.say(); per2.say(); console.log( per1.say==per2.say ) //false
因为console.log( per1.say==per2.say ) //false
我们可以得出一个结论。
那就是per1.say()和per2.say()调用的不是同一个方法
那么他们的内容是否是相等的的呢?
console.log( per1.say()==per2.say() ) //true
说明内容是相等的
function Person(name,age,like) { this.name=name; this.age=age; this.like=like; this.say=function(){ console.log('我可以不吃饭'); } }; for (var index = 0; index < 100; index++) { var per=new Person("司藤",300,'耍'); per.say(); }
这一段代码:是它在内存中开辟了100个空间。每个空间都有一个say方法。但是每一个say方法都是不同的。可是他们输出的内容是相同。或者说执行的逻辑是相同的。这样就造成了空间浪费。所以在项目中,这样就造成了浪费空间。
我们可不可以来优化呢 ?
function comSay(){ // 执行相同的逻辑 console.log('我可以不吃饭') }; function Person(name,age,like) { this.name=name; this.age=age; this.like=like; this.say=comSay;//不要加括号 }; var per1=new Person("司藤",300,'耍'); var per2=new Person('白浅','10000','耍'); console.log( per1.say==per2.say ) //true
这样我们就节约了空间。每次调用的时候,都是同一个方法。
function Person(name,age,like) { this.name=name; this.age=age; this.like=like; }; Person.prototype.comSay=function(){ console.log('我可以不吃饭') } var per1=new Person("司藤",300,'耍'); var per2=new Person('白浅','10000','耍'); console.log( per1.comSay==per2.comSay ) //true // 我们还可以通过原型来解决数据共享
原型的作用:数据共享,节约空间。
到此,关于“JS构造函数和实例化的关系及原型引入举例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。