對(duì)javascript 這門語(yǔ)言來(lái)說(shuō)，相信大家都不會(huì)陌生，但最近發(fā)現(xiàn)其實(shí)好多人對(duì)JS對(duì)象的概念很模糊，甚至?xí)@異于JS竟然也有對(duì)象

其實(shí)JS是完全基于對(duì)象的語(yǔ)言，我們所能看到的都是基于對(duì)象，包括 js 方法其實(shí)也是一個(gè)對(duì)象

但是js的面向?qū)ο笈c像java的面向?qū)ο笙啾?又是有著極大的不同，java，C#完全面向?qū)ο蟮恼Z(yǔ)言 中有類這個(gè)概念，而js對(duì)象則是依靠 構(gòu)造器constructor利用 原型prototype構(gòu)造出來(lái)的。

簡(jiǎn)單的理解下，類的概念相當(dāng)于 模板，原型相當(dāng)于 各個(gè)對(duì)象組成新的對(duì)象

先來(lái)總結(jié)一下創(chuàng)建對(duì)象的3種方式

創(chuàng)建對(duì)象的三種方式：

1.通過(guò)JSON符號(hào)創(chuàng)建

var dog = {
    name: 'singledog',
    wangwang: function(){
      console.log(this.name+"旺旺！");
    }
  };
  dog.wangwang();// singledog旺旺！

2.通過(guò)new 關(guān)鍵字創(chuàng)建

function Dog(name){
    this.name = name;
  };
  Dog.prototype.wangwang = function() {
    console.log(this.name+"wangwang!!");
  };
  var dog = new Dog("SingleDog:");
  dog.wangwang();//SingleDog:wangwang!!

3.通過(guò) ES5新引進(jìn)的 Object.create() 方法創(chuàng)建

var dog = {
    name: 'singledog',
    wangwang: function(){
      console.log(this.name+"旺旺！");
    }
  };
  var jDog = Object.create(dog);//創(chuàng)建一個(gè)新的對(duì)象 jDog 并繼承 dog 對(duì)象
  jDog.wangwang();//singledog旺旺！

原型（prototype）

prototype（原型）是js面向?qū)ο笾蟹浅Ｖ匾囊粋€(gè)概念，是深入學(xué)習(xí)js是必須要理解的一個(gè)概念
每個(gè)方法 都有一個(gè)prototype屬性，我們可以利用這個(gè)屬性來(lái)大做文章
之前介紹了，我們生成一個(gè)需要用到 new 關(guān)鍵字，那么這個(gè)new 關(guān)鍵字與JAVA中的new一樣嗎？

答案是完全不一樣

可以看一個(gè)例子：

function Car(name){
    this.name = name
  };
  Car.prototype = {//指定 Car的原型 對(duì)象
    driver: function(){
      console.log(this.name+" driver!!");
    }
  };

  var obj = new Object();
  obj.__proto__ = Car.prototype;
  Car.call(obj,"Benz");
  obj.driver(); //Benz driver!!

在上面的代碼中，我們發(fā)現(xiàn) var car = new Car();這句被我們替換成了這三句：

var obj = new Object();
obj.__proto__ = Car.prototype;
Car.call(obj,"Benz");

以上代碼中，我們先新建了一個(gè)空的Object對(duì)象 obj，然后將Car的原型賦給了 obj對(duì)象的__proto__，這樣子obj對(duì)象就繼承了Car的原型對(duì)象，最后一步，在obj對(duì)象上執(zhí)行構(gòu)造方法Car，這樣子 obj 對(duì)象就相當(dāng)于拿來(lái)了 Car方法中 全部this. 屬性或方法

這三步其實(shí)等于new 操作

基于原型，我們可以實(shí)現(xiàn)原型鏈的繼承，因?yàn)槊恳粋€(gè) prototype 都是一個(gè)對(duì)象，每個(gè)對(duì)象都隱式的擁用一個(gè) prototype 引用 __proto__ 屬性，這樣子當(dāng)調(diào)用一個(gè)對(duì)象的方法的時(shí)候，就會(huì)順著__proto__屬性一層一層往上找，直到找到為止。

說(shuō)起來(lái)似乎很難理解，看個(gè)例子幫助大家理解：

function Car(){
  };
  Car.prototype = {//指定 Car的原型 對(duì)象
    name : 'car',
    driver: function(){
      console.log(this.name+" driver!!");
    }
  };

  function QqCar(){
    this.name = 'QQ'
  };

  QqCar.prototype = new Car(); //指定 QqCar的原型為 new Car()

  var qqCar = new QqCar();//繼承了driver 方法 
  qqCar.driver(); // QQ driver!!

  function BigQqCar(){
    this.name = 'BigQQ'
  };

  BigQqCar.prototype = qqCar; //指定 BigQQCar的原型為 qqCar

  var bigQqCar = new BigQqCar();
  bigQqCar.driver = function(){//重寫了driver方法
    console.log(this.name+" flying!!");
  };
  bigQqCar.driver();//BigQQ flying!!

  console.log(bigQqCar.__proto__===BigQqCar.prototype); //true 
  console.log(BigQqCar.prototype === qqCar); //true
  console.log(BigQqCar.prototype.__proto__ === QqCar.prototype); //true

  // 以上代碼就是一個(gè)簡(jiǎn)單的原型鏈,每個(gè)構(gòu)造方法生成的對(duì)象都有一個(gè) __proto__ 指向 其構(gòu)造方法的prototype 屬性

以上也只是個(gè)人對(duì)JS面向?qū)ο蟮睦斫?，歡迎留言補(bǔ)充

博客原文地址戳這里