JS是基於對象的語言,可以使用面向對象思想模擬JAVA|C++之類的面向對象語言。
•面向過程
◦關註解決問題的步驟
•面向對象
◦關注的是解決問題的所需要的對象(內容和角色),然後根據業務邏輯按一定規則調用相關方法
對象分為系統對象和自定義對像兩種。我們可以通過調用系統構造函數來創建出系統對象,如:array|date等。自定義對象必須自己創造,無法利用系統函數來創造。
javascript創建對象
一、直接創建
//直接創建//JS創建對象//1:創建空對象var person1 = new Object(); //2:將該對象所需要的屬性、方法加進去person1.name ="ailer" ; console .log(person1.name); person1.gender = "male"; //3:該對象添加的方法|(函數) person1. manager= function (){ console .log("Ailer is my English name" ); } //4:調用對象方法:對象.方法名(); person1.manager(); //函數|方法?函數屬於對象時,該函數屬於這個對像下的方法;通過方法名來調用該函數; //變量|屬性?當變量屬於某一個對象時候, 該變量就是這個對像下的方法。通過屬性名來調用變量。 //增person1.age ="6" ; //改person1.name ="lemon" ; //查console .log(person1.name); //刪delete person1.age; console .log(person1.age);==> undefined //引用類型,存儲的是地址//基本類型:存儲的是值標誌位/* 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:通過.(點語法)訪問屬性//2:通過[](方括號)訪問對象的屬性;方括號中必須是屬性字符串或保存屬性字符串的變量|遍歷屬性的時候才使用方括號var n = "name" //console.log(per2["name"]);//雙引號console .log(per2[n]); for ( var property in per2) {// console.log(per2[property]); }雖然直觀,但是創建多個對象的時候,代碼冗餘
二、使用函數創建(工廠模式)
為了解決多個類似對象聲明的問題,我們可以使用一種叫做工廠模式的方法,這種方法就是為了解決實例化對象產生大量重複的問題。
//定義構造函數function createPerson ( name, age) {//創建一個新的空對象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//無法區分該對像類型console.log(per2.manager==per1.manager);//false 可得出per1和per2各自開閉空間優:批量創建同類實例
缺:實例用同類屬性, 造成內存浪費無法公,且無法區分該對象的類型
三、 字面量創建
優:簡單直接
缺:無法批量構建同類對象
//字面量創建的對象使用constructor屬性不會指向實例,而是指向object //使用字面量創建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+構造函數
//構造函數創建對象,其子對像用instanceof不識別,所有採用new+obj創建//對象識別了,但是仍然浪費一些代碼區;==>產生原型創建//創建js對象new+構造函數//1:創建構造函數|通常首字母大寫function CreatePerson( name , age){ //2:把對象的屬性|方法挂靠在this指針身上, 當調用該函數創建對象時,this指針就指向這個新對象; //這個this就添加給這個對象this.name = name; this.age = age; /*this.speak = function(){ //此處this也指向創建對象console.log(this.name+" hello"); } } /* CreatePerson.prototype.gender = "20"; CreatePerson.prototype. ea = function(){ console .log(this.name+ "sfd" ); }*/// __proto__:是:實例對像中的原型屬性, 指向對應構造函數對應的原型對象// [[prototype]] //調用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說明系統開闢了兩個不同的代碼區,造成了內存浪費.字面量創建一個比較方便,所以產生構造函數,普通構造函數(工廠模式),子對象instanceof不識別且內存浪費,用new+構造函數,子對象識別了,但仍有部分代碼重複,內存浪費,產生原型代碼解決。
五、原型模式
function CreateAnimal(name, age) { //1.2:把外部參數綁定實例屬性this.name = name; this.age = age; } //1.3把相同的屬性,綁定在原型上(原型屬性,原型方法) CreateAnimal.prototype.gender = "male"; CreateAnimal.prototype.style = function() { console.log(this.name + " ailers"); }; //2:調用構造函數創建對象var cat1 = new CreateAnimal("xiaohua", "2"); var cat2 = new CreateAnimal("xiaohua", "2"); cat1.style(); console.log(cat1.style==cat2.style);//方法引用地址一樣,將屬性放到原型對像中,節約地址//instanceof可以來判斷對象屬於哪一個【函數】 //constructor 建造者也可以用來判斷對象屬於哪個【構造函數】 【常】 //實例對象保存一個constructor屬性指向它的構造函數//instanceof and constructor 區別console.log(cat1 instanceof CreateAnimal);//true console.log(cat1 instanceof Object);//true console.log(cat1.constructor == CreateAnimal);//true console.log(cat1.constructor == Object); //==false //構造函數的原型也有constructor屬性指會構造函數console.log(CreateAnimal.prototype.constructor == CreateAnimal);//true //in判斷該屬性是否存在這個對像中,這個屬性為實例屬性或原型// alert("name" in cat1)//true// alert("gender" in cat1);//true //hasOwnProperty:來判斷某一個屬性到底是實例屬性,還是繼承自原型屬性if 是為true, else不存在|不是返回false; console.log(cat1.hasOwnProperty("aaa"));//false 不存在的屬性返回為false console.log(cat1.hasOwnProperty("name"));//true 實例屬性console.log(cat1.hasOwnProperty("style"));//false 原型屬性返回為false //遍歷屬性找原型屬性//判斷參數是否為原型屬性工具類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);}*/動態原型模式
//構造函數中初始化原型function per(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //只在初始化原型的時候執行一次if(typeof this.sayName != "function") { Person.prototype.sayName = function() { alert(this.name); } } }以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。