javascript如何創(chuàng)建對(duì)象
JS是基于對(duì)象的語言,可以使用面向?qū)ο笏枷肽MJAVA|C++之類的面向?qū)ο笳Z言。
•面向過程
◦關(guān)注解決問題的步驟
•面向?qū)ο?
◦關(guān)注的是解決問題的所需要的對(duì)象(內(nèi)容和角色),然后根據(jù)業(yè)務(wù)邏輯按一定規(guī)則調(diào)用相關(guān)方法
對(duì)象分為系統(tǒng)對(duì)象和自定義對(duì)象兩種。我們可以通過調(diào)用系統(tǒng)構(gòu)造函數(shù)來創(chuàng)建出系統(tǒng)對(duì)象,如:array|date等。自定義對(duì)象必須自己創(chuàng)造,無法利用系統(tǒng)函數(shù)來創(chuàng)造。
javascript創(chuàng)建對(duì)象
一、直接創(chuàng)建
//直接創(chuàng)建 //JS創(chuàng)建對(duì)象 //1:創(chuàng)建空對(duì)象 var person1 = new Object(); //2:將該對(duì)象所需要的屬性、方法加進(jìn)去 person1.name ="ailer" ; console .log(person1.name); person1.gender = "male"; //3:該對(duì)象添加的方法|(函數(shù)) person1. manager= function (){ console .log("Ailer is my English name" ); } //4:調(diào)用對(duì)象方法:對(duì)象.方法名(); person1.manager(); //函數(shù)|方法?函數(shù)屬于對(duì)象時(shí),該函數(shù)屬于這個(gè)對(duì)象下的方法;通過方法名來調(diào)用該函數(shù); //變量|屬性 ?當(dāng)變量屬于某一個(gè)對(duì)象時(shí)候, 該變量就是這個(gè)對(duì)象下的方法。通過屬性名來調(diào)用變量。 //增 person1.age ="6" ; //改 person1.name ="lemon" ; //查 console .log(person1.name); //刪 delete person1.age; console .log(person1.age);==> undefined //引用類型,存儲(chǔ)的是地址 //基本類型:存儲(chǔ)的是值 標(biāo)志位 /* var arr1 = [1,2,3,4] var arr2 = [5, 6, 7,9]; var arr2 = arr1;// arr2[0]=10;//更改arr2里面的值,arr1也更改 alert(arr1[0]);//====>10 引用類型*/ var per2 = new Object(); per2.name = "Relia"; per2.age = "18"; per2.gender = "femal"; per2.hobby = "lemons"; //1:通過.(點(diǎn)語法)訪問屬性 //2:通過[](方括號(hào))訪問對(duì)象的屬性;方括號(hào)中必須是屬性字符串或保存屬性字符串的變量|遍歷屬性的時(shí)候才使用方括號(hào) var n = "name" //console.log(per2["name"]);//雙引號(hào) console .log(per2[n]); for ( var property in per2) { // console.log(per2[property]); }
雖然直觀,但是創(chuàng)建多個(gè)對(duì)象的時(shí)候,代碼冗余
二、使用函數(shù)創(chuàng)建(工廠模式)
為了解決多個(gè)類似對(duì)象聲明的問題,我們可以使用一種叫做工廠模式的方法,這種方法就是為了解決實(shí)例化對(duì)象產(chǎn)生大量重復(fù)的問題。
//定義構(gòu)造函數(shù) function createPerson ( name, age) { //創(chuàng)建一個(gè)新的空對(duì)象 var person = new Object; //添加屬性|方法 person.name = name; person.age = age; person. manager = function() { console .log("ai" ); } //返回 return person; } var per1 = createPerson( "ailer", 12 ); console .log(per1.name); var per2 = createPerson( "lemon", 23 ); console .log(per2.age); console.log(per2 instanceof Object);//true console.log(per2 instanceof createPerson);//false//無法區(qū)分該對(duì)象類型 console.log(per2.manager==per1.manager);//false 可得出per1和per2各自開閉空間
優(yōu):批量創(chuàng)建同類實(shí)例
缺:實(shí)例用同類屬性, 造成內(nèi)存浪費(fèi)無法公,且無法區(qū)分該對(duì)象的類型
三、 字面量創(chuàng)建
優(yōu):簡(jiǎn)單直接
缺:無法批量構(gòu)建同類對(duì)象
//字面量創(chuàng)建的對(duì)象使用constructor屬性不會(huì)指向?qū)嵗?,而是指向object //使用字面量創(chuàng)建 var per1 = { name:"Ailer", constructor:per1, age:12, gender:"female", hobby:"play", eat:function(){ console.log(this.name); } } per1.eat();//ailer per1.name="lemon"; per1.eat();//lemon console.log(typeof per1);//Object console.log(per1.constructor==Object);//true
四、new+構(gòu)造函數(shù)
//構(gòu)造函數(shù)創(chuàng)建對(duì)象,其子對(duì)象用instanceof不識(shí)別,所有采用new+obj創(chuàng)建 //對(duì)象識(shí)別了,但是仍然浪費(fèi)一些代碼區(qū);==>產(chǎn)生原型創(chuàng)建 //創(chuàng)建js對(duì)象 new+構(gòu)造函數(shù) //1:創(chuàng)建構(gòu)造函數(shù) |通常首字母大寫 function CreatePerson( name , age){ //2:把對(duì)象的屬性|方法掛靠在this指針身上, 當(dāng)調(diào)用該函數(shù)創(chuàng)建對(duì)象時(shí),this指針就指向這個(gè)新對(duì)象; //這個(gè)this就添加給這個(gè)對(duì)象 this.name = name; this.age = age; /*this.speak = function(){ //此處this也指向創(chuàng)建對(duì)象 console.log(this.name+" hello"); } } /* CreatePerson.prototype.gender = "20"; CreatePerson.prototype. ea = function(){ console .log(this.name+ "sfd" ); }*/ // __proto__:是:實(shí)例對(duì)象中的原型屬性, 指向?qū)?yīng)構(gòu)造函數(shù)對(duì)應(yīng)的原型對(duì)象 // [[prototype]] //調(diào)用 var per1 = new CreatePerson( "ailer", "20" ); var per2 = new CreatePerson( "relia", "18" ); console .log(per1 instanceof CreatePerson); //==true console .log(per2 instanceof CreatePerson); //==>true console .log(per1.speak== per2.speak); //==false說明系統(tǒng)開辟了兩個(gè)不同的代碼區(qū),造成了內(nèi)存浪費(fèi).
字面量創(chuàng)建一個(gè)比較方便,所以產(chǎn)生構(gòu)造函數(shù),普通構(gòu)造函數(shù)(工廠模式),子對(duì)象instanceof不識(shí)別且內(nèi)存浪費(fèi),用new+構(gòu)造函數(shù),子對(duì)象識(shí)別了,但仍有部分代碼重復(fù),內(nèi)存浪費(fèi),產(chǎn)生原型代碼解決。
五、原型模式
function CreateAnimal(name, age) { //1.2:把外部參數(shù)綁定實(shí)例屬性 this.name = name; this.age = age; } //1.3把相同的屬性,綁定在原型上(原型屬性,原型方法) CreateAnimal.prototype.gender = "male"; CreateAnimal.prototype.style = function() { console.log(this.name + " ailers"); }; //2:調(diào)用構(gòu)造函數(shù)創(chuàng)建對(duì)象 var cat1 = new CreateAnimal("xiaohua", "2"); var cat2 = new CreateAnimal("xiaohua", "2"); cat1.style(); console.log(cat1.style==cat2.style);//方法引用地址一樣,將屬性放到原型對(duì)象中,節(jié)約地址 //instanceof可以來判斷對(duì)象屬于哪一個(gè)【函數(shù)】 //constructor 建造者 也可以用來判斷對(duì)象屬于哪個(gè)【構(gòu)造函數(shù)】 【?!? //實(shí)例對(duì)象保存一個(gè) constructor屬性指向它的構(gòu)造函數(shù) //instanceof and constructor 區(qū)別 console.log(cat1 instanceof CreateAnimal);//true console.log(cat1 instanceof Object);//true console.log(cat1.constructor == CreateAnimal);//true console.log(cat1.constructor == Object); //==false //構(gòu)造函數(shù)的原型也有constructor屬性指會(huì)構(gòu)造函數(shù) console.log(CreateAnimal.prototype.constructor == CreateAnimal);//true //in判斷該屬性是否存在這個(gè)對(duì)象中,這個(gè)屬性為實(shí)例屬性或原型 // alert("name" in cat1)//true // alert("gender" in cat1);//true //hasOwnProperty:來判斷某一個(gè)屬性到底是實(shí)例屬性,還是繼承自原型屬性 if 是 為true, else不存在|不是返回false; console.log(cat1.hasOwnProperty("aaa"));//false 不存在的屬性返回為false console.log(cat1.hasOwnProperty("name"));//true 實(shí)例屬性 console.log(cat1.hasOwnProperty("style"));//false 原型屬性返回為false //遍歷屬性找原型屬性 //判斷參數(shù)是否為原型屬性 工具類 console.log(isPrototype("gender", cat1));//true function isPrototype(proString, obj) { if(proString in obj) { if(!obj.hasOwnProperty(proString)) { return true; } else { return false; } } else { return false; } } /* function isProperty(object, property) {//判斷原型中是否存在屬性 return !object.hasOwnProperty(property) && (property in object); }*/
動(dòng)態(tài)原型模式
//構(gòu)造函數(shù)中初始化原型 function per(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //只在初始化原型的時(shí)候執(zhí)行一次 if(typeof this.sayName != "function") { Person.prototype.sayName = function() { alert(this.name); } } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS創(chuàng)建對(duì)象的寫法示例
- javascript創(chuàng)建對(duì)象的3種方法
- js創(chuàng)建對(duì)象幾種方式的優(yōu)缺點(diǎn)對(duì)比
- js面向?qū)ο笾R妱?chuàng)建對(duì)象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- JavaScript中用字面量創(chuàng)建對(duì)象介紹
- JavaScript中使用Object.create()創(chuàng)建對(duì)象介紹
- js中創(chuàng)建對(duì)象的幾種方式示例介紹
- javascript中創(chuàng)建對(duì)象的幾種方法總結(jié)
- JavaScript創(chuàng)建對(duì)象的寫法
- JavaScript創(chuàng)建對(duì)象的七種方式(推薦)
相關(guān)文章
js跳轉(zhuǎn)頁面方法實(shí)現(xiàn)匯總
js跳轉(zhuǎn)頁面的方法有很多,本文搜集整理了一些,個(gè)人感覺還不錯(cuò),希望對(duì)大家有所幫助2014-02-02js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作
這篇文章主要為大家詳細(xì)介紹了js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04JS 實(shí)現(xiàn)Base64編碼與解碼實(shí)例詳解
這篇文章主要介紹了JS 實(shí)現(xiàn)Base64編碼與解碼實(shí)例詳解的相關(guān)資料,并附實(shí)例代碼,幫助大家學(xué)習(xí)理解此部分知識(shí),需要的朋友可以參考下2016-11-11Js查找字符串中出現(xiàn)次數(shù)最多的字符及個(gè)數(shù)實(shí)例解析
這篇文章主要介紹了Js查找字符串中出現(xiàn)次數(shù)最多的字符及個(gè)數(shù) ,本文分為傳統(tǒng)寫法和正則寫法兩種方法給大家介紹了js查找字符串出現(xiàn)次數(shù)最多的字符及個(gè)數(shù),非常不錯(cuò),感興趣的朋友參考下吧2016-09-09js單頁hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解
本篇文章主要介紹了js單頁hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08利用select實(shí)現(xiàn)年月日三級(jí)聯(lián)動(dòng)的日期選擇效果【推薦】
關(guān)于select控件,可能年月日三級(jí)聯(lián)動(dòng)的日期選擇效果是最常見的應(yīng)用了。本文將對(duì)日期選擇效果進(jìn)行詳細(xì)介紹。需要的朋友一起來看下吧2016-12-12Javascript實(shí)現(xiàn)一朵從含苞到綻放的玫瑰
今天小編就為大家分享一篇關(guān)于Javascript實(shí)現(xiàn)一朵從含苞到綻放的玫瑰,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-03-03