探究JavaScript原型數(shù)據(jù)共享與方法共享實(shí)現(xiàn)
數(shù)據(jù)共享
什么樣子的數(shù)據(jù)是需要寫在原型中?
需要共享的數(shù)據(jù)就可以寫原型中
原型的作用之一:數(shù)據(jù)共享
屬性需要共享,方法也需要共享:
- 不需要共享的數(shù)據(jù)寫在構(gòu)造函數(shù)中
- 需要共享的數(shù)據(jù)寫在原型中
下面我們看一個(gè)案例
數(shù)據(jù)共享案例
每個(gè)學(xué)生的名字,年齡,性別都是獨(dú)特的,我們要設(shè)置
所有學(xué)生的身高都是188,所有人的體重都是55
所有學(xué)生都要每天寫500行代碼
所有學(xué)生每天都要吃一個(gè)10斤的西瓜
就可以把共有數(shù)據(jù)寫到原型中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> function Student(name,age,sex) { this.name=name; this.age=age; this.sex=sex; } // 所有學(xué)生的身高都是188,所有人的體重都是55 // 所有學(xué)生都要每天寫500行代碼 // 所有學(xué)生每天都要吃一個(gè)10斤的西瓜 //原型對(duì)象 Student.prototype.height="188"; Student.prototype.weight="55kg"; Student.prototype.study=function () { console.log("學(xué)習(xí),寫500行代碼,小菜一碟"); }; Student.prototype.eat=function () { console.log("吃一個(gè)10斤的西瓜"); }; //實(shí)例化對(duì)象,并初始化 var stu=new Student("晨光",57,"女"); console.dir(Student); console.dir(stu); // stu.eat(); // stu.study(); </script> </head> <body> </body> </html>
打印出來是這樣的
原型簡(jiǎn)單寫法
原型還有一種更簡(jiǎn)單的方法,下面是對(duì)上面案例的修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> function Student(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } //簡(jiǎn)單的原型寫法 Student.prototype = { //手動(dòng)修改構(gòu)造器的指向 constructor:Student, height: "188", weight: "55kg", study: function () { console.log("學(xué)習(xí)好開心啊"); }, eat: function () { console.log("我要吃好吃的"); } }; var stu=new Student("鼎鼎大名",20,"男"); stu.eat(); stu.study(); console.dir(Student); console.dir(stu); </script> </head> <body> </body> </html>
原型方法共享
例如設(shè)定方法,吃完了玩,玩完了睡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> //原型中的方法,是可以相互訪問的 function Animal(name,age) { this.name=name; this.age=age; } //原型中添加方法 // 吃完了就玩 Animal.prototype.eat=function () { console.log("動(dòng)物吃東西"); this.play(); }; // 玩完了就睡 Animal.prototype.play=function () { console.log("玩球"); this.sleep(); }; Animal.prototype.sleep=function () { console.log("睡覺了"); }; var dog=new Animal("小蘇",20); dog.eat(); //原型對(duì)象中的方法,可以相互調(diào)用 </script> </head> <body> </body> </html>
到此這篇關(guān)于探究JavaScript原型數(shù)據(jù)共享與方法共享實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)探究JavaScript原型數(shù)據(jù)共享與方法共享內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于bootstrap寫的一點(diǎn)localStorage本地儲(chǔ)存
這篇文章主要介紹了基于bootstrap寫的一點(diǎn)localStorage本地儲(chǔ)存,需要的朋友可以參考下2017-11-11JavaScript設(shè)計(jì)模式策略模式案例分享
這篇文章主要介紹了JavaScript設(shè)計(jì)模式策略模式案例分享,策略設(shè)計(jì)模式就是指一個(gè)問題匹配多個(gè)解決方法,不一定要用到哪一個(gè),而且有可能隨時(shí)增加多個(gè)方案2022-06-06window.name代替cookie的實(shí)現(xiàn)代碼
window.name代替cookie的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11創(chuàng)建echart多個(gè)聯(lián)動(dòng)的示例代碼
這篇文章主要介紹了創(chuàng)建echart多個(gè)聯(lián)動(dòng)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法
這篇文章主要介紹了JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法,實(shí)例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03JS實(shí)現(xiàn)向表格中動(dòng)態(tài)添加行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)向表格中動(dòng)態(tài)添加行的方法,涉及javascript針對(duì)表格行的動(dòng)態(tài)添加技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03原生js實(shí)現(xiàn)計(jì)算購物車總金額的示例
本文主要介紹了原生js實(shí)現(xiàn)計(jì)算購物車總金額的示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04JS實(shí)現(xiàn)搜索關(guān)鍵詞的智能提示功能
最近在百度搜索的時(shí)候,當(dāng)你輸入一個(gè)字或者詞的時(shí)候,他會(huì)給你們彈出一個(gè)下拉框出來,里面是和你相關(guān)的搜索提示,效果非常人性化,基于js怎么實(shí)現(xiàn)搜索關(guān)鍵詞智能提示功能,下面小編通過實(shí)例代碼給大家介紹下,需要的的朋友參考下吧2017-07-07JavaScript 組件之旅(一)分析和設(shè)計(jì)
毫無疑問,JavaScript 是一種非常靈活的腳本語言,有時(shí)候它像一只難以馴服的野馬——你受益于它的靈活性的同時(shí),也要時(shí)刻提防它變得失去控制2009-10-10