想說愛你不容易對象

時間 2019-12-09

標籤想說容易對象简体版

原文原文鏈接

想說愛你不容易對象

最近幾天一直和朋友在討論關於對象的問題，固然，在這裏說的對象不是指男女友對象，是佔據javascript整個的對象，畢竟js是面向對象的編程語言，那麼首先咱們要搞清楚什麼是對象，無論你怎麼去查閱資料，很難去給對象下一個定義，由於這玩意說實話沒有特定的含義，須要咱們去慢慢的去理解。在這裏吧我也談一下我對對象的理解。

對象，從哲學理論（博主不是在吹，哲學思想很重要）上講十分抽象，你們確定據說過一切皆是對象這句話。咱們看到的任何東西均可以是對象，好比電視機，電腦，空調，洗衣機。。等等咱們並不知道電視機裏面構造是啥 咱們會用就行，就像咱們不須要知道Date對象裏面是啥，咱們知道它是獲取日期的就行。其實對象這個概念來源於生活，就像你去飯店吃飯同樣，吩咐廚師來一碗蘇格蘭打滷麪，你根本不須要知道蘇格蘭打滷麪怎麼作的，你只要知道廚師會作就行，經過調用（指揮）廚師就能獲取你想要的東西（面）。

俗話說的好要知其然知其因此然，如今咱們不但要會用對象，咱們還要學會寫一個對象，這樣也能幫咱們更好的知道什麼是對象以及對象的一些特性。

瀏覽器自帶的對象不少像Date，Array,Regexp,Error...等這些都是自帶功能的對象，可是有一個對象自身是沒有功能的，就像一個新的畫布同樣，咱們能夠在上面繪製咱們想要的東西，這個對象就是Object,它是一個空白對象。如今咱們作這樣一個例子建立一我的物對象他的名字叫張三，年齡23，他有本身的showName，showAge方法。以下

var person = new Object();
person.name = '張三';
person.age = 23;
person.showName = function(){
    alert("個人名字叫"+this.name)
}
person.showAge = function(){
    alert("個人年齡是"+this.age+"歲")
}
person.showName();//個人名字叫張三
person.showAge();//個人年齡是23歲

假如如今要你在建立一我的叫李四年齡24有本身的showName,showAge方法，那麼咱們可能會這樣寫

var person = new Object();
person.name = '張三';
person.age = 23;
person.showName = function(){
    alert("個人名字叫"+this.name)
}
person.showAge = function(){
    alert("個人年齡是"+this.age+"歲")
}
person.showName();//個人名字叫張三
person.showAge();//個人年齡是23歲
//.................................
var person1 = new Object();
person1.name = '李四';
person1.age = 24;
person1.showName = function(){
    alert("個人名字叫"+this.name)
}
person1.showAge = function(){
    alert("個人年齡是"+this.age+"歲")
}
person1.showName();//個人名字叫李四
person1.showAge();//個人年齡是24歲

我相信寫到這裏你仍是能夠接受，可是假如如今再讓你添加一我的，或者十我的我相信你會瘋掉，因此咱們能夠對代碼優化，最好的辦法就是抽出相同的部分封裝成方法以下

function Createperson(name,age){
    //原料
    var Person = new Object();
    //加工
    Person.name = name;
    Person.age = age;
    Person.showName = function(){
        alert("個人名字叫"+this.name)
    }
    Person.showAge = function(){
        alert("個人年齡是"+this.age+"歲")
    }
    //出廠
    return Person;
}
var person = Createperson('張三',23)
person.showName();//個人名字叫張三
person.showAge();//個人年齡是23歲
//.................................
var person1 = Createperson('李四',24)
person1.showName();//個人名字叫李四
person1.showAge();//個人年齡是24歲

這樣寫是否是代碼減小了不少，這裏有幾個概念我須要說明一下，

構造函數：Createperson函數在這裏有一個別名叫作構造函數，爲何呢？由於它是專門用來生成對象的。

屬性：構造函數裏面的name和age叫作屬性，其實屬性和變量是一個概念，只不過變量是自由的，而屬性是屬於一個對象的，

工廠方式：建立對象的方式有不少種，而這裏運用的是工廠方式，就是原料>加工>出廠的過程。

日常咱們建立實例都會寫一個new 而咱們上面的代碼卻沒有寫new 而是直接調用Createperson方法，那麼咱們能夠給它前面加一個new 嗎？固然任何函數前面均可以加new 只不過會有些區別，好比下面例子

function show (){
    alert(this);
}
show()//window
new show()//Object
//也就是說當沒有new 的時候，this是指向window的，由於這個方法自己就屬於window，而當添加上new的時候此時this指向的是一個新的對象

咱們隊上面的代碼進行改造，會獲得以下代碼

function Createperson(name,age){
    //var Person = new Object();
    this.name = name;
   this.age = age;
    this.showName = function(){
        alert("個人名字叫"+this.name)
    }
    this.showAge = function(){
        alert("個人年齡是"+this.age+"歲")
    }
    //return Person;
}
var person = new Createperson('張三',23)
person.showName();//個人名字叫張三
person.showAge();//個人年齡是23歲
//.................................
var person1 = new Createperson('李四',24)
person1.showName();//個人名字叫李四
person1.showAge();//個人年齡是24歲

我相信你們很奇怪爲何有了new以後要這樣寫，實際上是這樣的，沒有new的時候咱們要本身建立一個空白對象並把這個空白對象返回出去，可是有了new以後就不同了系統會暗地裏悄無聲息地幫咱們作兩件事情第一：建立一個空白對象第二：把空白對象返回出去也就是這樣的邏輯

function Createperson(name,age){
    //var Person = new Object();
    //瀏覽器會偷偷的這樣作 var this = new Object();
    this.name = name;
   this.age = age;
    this.showName = function(){
        alert("個人名字叫"+this.name)
    }
    this.showAge = function(){
        alert("個人年齡是"+this.age+"歲")
    }
    //return Person;
    //瀏覽器偷偷的return this
}
var person = new Createperson('張三',23)
person.showName();//個人名字叫張三
person.showAge();//個人年齡是23歲
//.................................
var person1 = new Createperson('李四',24)
person1.showName();//個人名字叫李四
person1.showAge();//個人年齡是24歲

通過上面代碼的改造咱們如今給構造函數添加了new，可是還有問題假如如今要添加更多的人，那麼咱們要不停的new(),那麼內存中就是每一個人都有name age showName showAge ,這樣太浪費內存空間看過我前面文章的朋友可能知道該怎麼處理，在處理以前我在重複講三個概念

原型：什麼是原型呢？其實原型咱們以前接觸過，可能你沒有很深的概念，在css中咱們給一組元素添加樣式會用到class，給一個元素添加樣式可能會用到行間樣式，然而在js中給一組對象添加方法就叫作原型，例以下面一個簡單的例子

var arr1 = new Array(1,2,3);
var arr2 = new Array(1,2,4);
arr1.sum = function(){
    var result = 0;
    for(var i =0;i<this.length; i++){
        result += this[i];
    }
    return result;
}
alert(arr1.sum())//6
alert(arr2.sum())//arr2.sum is not a function

爲何arr2沒有sum方法呢，其實很簡單，由於你只給arr1添加了sum方法，就比如給一個元素添加了行間樣式，這個樣式只屬於這個元素而已，那麼要怎樣才能讓arr2上面也有sum方法呢，這就要利用原型了。咱們把代碼改爲下面這樣子

var arr1 = new Array(1,2,3);
var arr2 = new Array(1,2,8);
Array.prototype.sum= function(){
    var result = 0;
    for(var i =0;i<this.length; i++){
        result += this[i];
    }
    return result;
}
alert(arr1.sum())//6
alert(arr2.sum())//11

類什麼是類呢類其實就是一個模子 Array ,Date就是類也能夠管類叫作構造函數模子的做用是成產產品，而類的做用是生產對象
就像var arr = new Array();那麼arr就是成產出來的對象（產品），Array就是模子（類）

有了上面的原型類的概念咱們把咱們的代碼進一步改形成下面的

function Createperson(name,age){
    //var Person = new Object();
    this.name = name;
   this.age = age;
    
}
Createperson.prototype.showName = function(){
    alert("個人名字叫"+this.name)
}
Createperson.prototype.showAge = function(){
    alert("個人年齡是"+this.age+"歲")
}
var person = new Createperson('張三',23)
person.showName();//個人名字叫張三
person.showAge();//個人年齡是23歲
//.................................
var person1 = new Createperson('李四',24)
person1.showName();//個人名字叫李四
person1.showAge();//個人年齡是24歲