js的對象與函數(shù)詳解

發(fā)布時間：2020-09-20 02:23:02 來源：腳本之家閱讀：143 作者：muzidigbig 欄目：web開發(fā)

一、對象

就是人們要研究的任何事物，不僅能表示具體事物，還能表示抽象的規(guī)則，計劃或事件。
屬性的無序集合，每個屬性可以存一個值(原始值，對象，函數(shù))

對象的特性:封裝，盡可能的隱藏對象的部分細(xì)節(jié)，使其受到保護(hù)。只保留有限的接口和外部發(fā)生聯(lián)系。

js 中{},[] 來定義數(shù)組和對象

1.{ } 大括號，表示定義一個對象，大部分情況下要有成對的屬性和值，或是函數(shù)。

2.[ ]中括號，表示一個數(shù)組，也可以理解為一個數(shù)組對象。

3.{ } 和[ ] 一起使用，我們前面說到，{ } 是一個對象，[ ] 是一個數(shù)組，我們可以組成一個對象數(shù)組

調(diào)用起來對象的屬性用.（點(diǎn)）疊加/對象名['屬性名稱']，數(shù)組用 [下標(biāo)] 來訪問。

二、Js自定義對象的2種方式

1、對象初始化器構(gòu)造對象

 var marry={
 name:"marry",
 age:2,
 shout:function(){
  alert("我是："+this.name+",今年："+this.age);
 },
 action:function(){
  alert("會吃");
 }
 };
 alert(marry.name);
 alert(marry.age);
 marry.shout();
 marry.action();

2.定義對象的內(nèi)存分別

當(dāng)我們創(chuàng)建一個對象 ren，會在棧內(nèi)存中保存一個地址，棧為長度不可變的地址。

而棧中的地址就對應(yīng)堆中的存儲地址。堆中的存儲地址，只要實(shí)例化會在堆中開辟一塊空間，地址就是棧的地址，內(nèi)容就是實(shí)例化對象里面的內(nèi)容，如name，sex，eat?？梢酝ㄟ^地址引用，訪問里面的屬性和方法。

當(dāng)我們再實(shí)例化一個對象，又會保存另一個地址及開辟一塊空間。

代碼段，共同的屬性或方法放在代碼段中，不在堆中。只執(zhí)行一次，節(jié)省內(nèi)存空間。代碼段會一直存在內(nèi)存的空間中，知道瀏覽器關(guān)閉。使用prototype方法創(chuàng)建

var ren ={};
ren.name="張三";
ren.sex="男";
ren.eat=function () {
  alert("吃飯");
}
alert(ren.name);
alert(ren["name"]);

3.工廠模式

工廠模式雖然解決多次創(chuàng)建相似對象的重復(fù)性問題，但是并沒有解決對象識別問題，也就是typeof之后他都顯示object，具體的對象是什么并沒有顯示。

function createPerson(name,age,job)
  {
    var o=new Object();
    o.name=name;
    o.age=age;
    o.job=job;
    o.sayName=function(){
      alert(this.name);//this指的是o
    }
    return o;
  }
  var person1=createPerson("Tom",23,"廚師");
  person1.sayName();

4、構(gòu)造函數(shù)方式

構(gòu)造函數(shù)模式和工廠模式的區(qū)別

　　1.沒有顯式的創(chuàng)建對象。

　　2.將屬性和方法賦給了this對象。

　　3.沒有return語句。

　　4.函數(shù)名第一個字母大寫。

　　構(gòu)造函數(shù)模式優(yōu)于工廠模式的原因就是，構(gòu)造函數(shù)模式中的對象實(shí)例(person1)通過constructor屬性或instanceof操作符可以驗(yàn)證person1既是Object的實(shí)例，也是Person的實(shí)例，同時也證明所有對象均來自于Object。

function Person(name,age,job)
  {
    this.name=name;
    this.age=age;
    this.job=job;
    this.sayName=function(){
      alert(this.name);//this是Person
    }
  }
  var person1=new Person("Tom",23,"廚師");
  person1.sayName();

 function Dog(name,age){
 this.name=name;
 this.age=age;
 this.shout=function(){
  alert("我是："+this.name+",今年："+this.age);
 };
 this.action=function(){
  alert("會吃");
 };
 }
 var jack=new Dog("jack",1);
 alert(jack.name);
 alert(jack.age);
 jack.shout();
 jack.action();

5.全局作用域

但是構(gòu)造函數(shù)也有缺點(diǎn)，對象是引用類型，對象實(shí)例化不是指針的改變，而是簡單的復(fù)制，復(fù)制對象的方法和屬性，假設(shè)一個對象有上千個實(shí)例，它就會復(fù)制上千個功能相同的方法，這顯然是不可取的。

我們也可以把sayName()函數(shù)的定義戰(zhàn)役到構(gòu)造函數(shù)的外部，這樣我們就將sayName屬性設(shè)置成等于全局的sayName函數(shù)，這樣實(shí)例化對象就共享全局作用域中的同一個sayName(),解決了構(gòu)造函數(shù)對象方法的多次創(chuàng)建問題。但是全局作用域定義的sayName()函數(shù)只能被某個對象調(diào)用談什么全局作用域，而且如果構(gòu)造函數(shù)對象的方法有很多，就需要定義很多全局函數(shù)，封裝性又從何談起，于是原型模式應(yīng)運(yùn)而生。

 function Person(name,age,job)
  {
    this.name=name;
    this.age=age;
    this.job=job;
    this.sayName=sayName;
  }
  function sayName(){
    alert(this.name)
  }
  var person1=new Person("Tom",23,"廚師");
  person1.sayName();

6.構(gòu)造函數(shù)創(chuàng)建對象

定義對象模擬數(shù)組，arguments為js內(nèi)置的對象。

function myArray () {
var lengs= arguments.length;
for (var i=0; i<lengs; i++) {
this[i]=arguments[i];
}
}
var arr=new myArray(1,2,3);
alert(arr[0]);

7.js動態(tài)構(gòu)造對象

<script type="text/javascript">
 /* function speak(something){
 alert(something);
 } */
 /* var p=new Object(); 
 p.name="Jack"; // 動態(tài)的添加屬性
 p.func=speak; // 動態(tài)的添加方法
 alert(p.name);
 p.func("Hello,Hello,大家好！"); */
 /* delete p.name; //刪除屬性 輸出undefine
 alert(p.name);
 delete p.func;
 p.func("Hello,Hello,大家好！"); */
 /* p.name=undefined;
 p.func=undefined;
 alert(p.name);
 p.func("Hello,Hello,大家好！"); */
 function person(name,age){//構(gòu)造方法
 this.name2=name;//給當(dāng)前對象動態(tài)添加屬性
 this.age2=age;
 function speak(something){
  alert(something);
 }
 this.func=speak;
 }
 var p1=new person("Jack",12);
 alert(p1.name2);
 p1.func("Hello,EveryOne!");
</script>

三、原型模式創(chuàng)建對象

我們創(chuàng)建的每一個函數(shù)都有一個prototype(原型)屬性，這個屬性是一個指針，指向一個對象，這個對象中包含著所有對象實(shí)例的屬性和方法，這個對象就是原型對象。通俗的說，原型對象中的方法和屬性可以被所有對象的實(shí)例所共享，對象實(shí)例就不用多次創(chuàng)建相同的方法和屬性。

function Person(){
  };
  Person.prototype={
    name:"Tom",
    age:23,
    job:"web前端工程師",
    sayName:function(){
      alert(this.name);
    }
  }
  var person1=new Person();
  person1.sayName();

js的對象與函數(shù)詳解

1.工廠函數(shù)封裝，通過一個函數(shù)封裝起來

function dianshi (color,size,brand) {
var Tv={};
Tv.color=color;
Tv.size=size;
Tv.brand=brand;
Tv.look=function () {
alert("看電視");
}
Tv.play=function () {
alert("玩游戲");
}
Tv.dvd=function () { 
alert("DVD");
} 
 return Tv;
}
var ds=dianshi("red","30inch","sony");
//alert(typeof ds)//返回object
alert(ds.color)
var ds1=dianshi("blue","40inch","changh");
alert(ds1["size"])//傳遞參數(shù)

2.構(gòu)造函數(shù)

function Tv(color,size,brand) {
this.color=color;//那個對象引用this就代表那個對象
this.size=size;
this.brand=brand;
this.play=function () {
alert("玩游戲");
}
this.look=function () {
alert("看電視");
}
}
var sony=new Tv("red","20 inch","sony");
alert(sony.color)

3.prototype方法

共同的屬性與方法放在代碼段，節(jié)省內(nèi)存空間

function Tv(color,size,brand) {
this.color=color;
this.size=size;
this.brand=brand;
this.play=function () {
alert("玩游戲");
}
}
Tv.prototype.look=function () {
 alert("看電視");
 }
Tv.prototype.dvd=function () {
 alert("DVD");
 }
Tv.prototype.aaa={name:"張三"};//只能共享屬性或函數(shù)，不能共享對象
var sony=new Tv("red","20 inch","sony");
var changhong =new Tv("red","20 inch","CH");
 delete sony.color
 delete sony.play//undefine
 delete sony.look//能訪問到
sony.look();
changhong.look();
sony.aaa.name="李四"http://李四
changhong.aaa.name//李四
全局對象Array擴(kuò)展增加removeByValue方法
Array.prototype.removeByValue = function(val) {
 for(var i=0; i<this.length; i++) {
  if(this[i] == val) {
   this.splice(i, 1);
   break;
  }
 }
}

雖然可以通過對象實(shí)例訪問保存在原型對象中的值，但卻不能通過對象實(shí)例重寫原型的值。其實(shí)對象實(shí)例獲取某一屬性的值是從本身開始尋找，然后是原型對象，最后是構(gòu)造函數(shù)對象，所以重寫對象實(shí)例的屬性值(這個值可以通過delete操作符刪除)僅僅是阻斷了獲取原型屬性值的途徑，但是沒有改變其中的值。

function Person(){
};
Person.prototype.name="Tom";
Person.prototype.age=23;
Person.prototype.job="廚師";
Person.prototype.sayName=function(){
  alert(this.name);
}
var person1=new Person();
var person2=new Person();
person1.name="Mike";
alert(person1.name);
alert(person2.name);
alert(person1.name);
alert(person2.name);

4.面向?qū)ο髣?chuàng)建對象

用面向?qū)ο笳Z法表示的時候，原型對象的constructor屬性不在指向Person，因?yàn)槊縿?chuàng)建一個函數(shù)，同時會創(chuàng)建它的prototype對象，用面向?qū)ο笳Z法本質(zhì)上相當(dāng)于重寫了prototype對象，constructor屬性也會變成新對象的constructor屬性(這里指向Object)

 function Person(){
  };
  Person.prototype={
    constructor:Person,
    name:"Tom",
    age:23,
    job:"廚師",
    sayName:function(){
      alert(this.name);
    }
  }
  var person1=new Person();
  var person2=new Person();
  person1.name="Mike";
  alert(person1.name);
  alert(person2.name);

原型模式的缺點(diǎn)：因?yàn)樗詫ο髮?shí)例共享原型對象的方法和屬性，但是往往實(shí)例都有他自己私有的屬性，這時候原型模式就不適用了，所以我們可以混合使用構(gòu)造函數(shù)模式和原型模式。

5.混合方法

組合使用構(gòu)造函數(shù)模式和原型模式結(jié)合了構(gòu)造函數(shù)和原型模式的優(yōu)點(diǎn)，構(gòu)造函數(shù)定義實(shí)例的私有屬性，原型模式定義共享屬性和方法。

function Tv(color,size,brand) {
  this.color=color;
  this.size=size;
  this.brand=brand;
  this.play=function () {
   alert("玩游戲");
  }
 Tv.prototype.aaa={name:"張三"};
 }
  Tv.prototype.look=function () {
   alert("看電視");
  }
  Tv.prototype.dvd=function () {
   alert("DVD");
  }
}

 function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
  };
  Person.prototype={
    constructor:Person,
    sayName:function(){
      alert(this.name);
    }
  }
  var person1=new Person("Tom");
  var person2=new Person("Mike");
  alert(person1.name);
  alert(person2.name);

四、js對象屬性

如果屬性的值是函數(shù)，我們叫做他是對象的方法，否則叫做是屬性。

1.私有屬性，對象屬性，類屬性

<script type="text/javascript">
 function C(){
 this.objPro="對象屬性";
 C.prototype.objPro2="對象屬性2";//原型
 var privatePro="私有屬性";//只能在方法內(nèi)部使用
 }
 C.classPro="類屬性";
 alert(C.classPro);
 var c=new C();
 alert(c.objPro);
 alert(c.objPro2);
</script>

2.私有方法，對象方法，類方法

<script type="text/javascript">
 function C(){
 var privateFunc=function(){
  alert("私有方法");
 };
 privateFunc();
 this.objFunc=function(){
  alert("對象方法");
 };
 C.prototype.objFunc2=function(){
  alert("對象方法2");
 };
 }
 C.classFunc=function(){
 alert("類方法");
 };
 C.classFunc();
 var c=new C();
 c.objFunc();
 c.objFunc2();
</script>

五、js函數(shù)

1. 函數(shù)的定義：

1.采用關(guān)鍵字function來定義

 function fun(){
   alert("大家好")
 }
 // fun() ;

2.采用匿名函數(shù)的方式（采用function作為名字）

var a = function(){
 alert("我是匿名函數(shù)") ;
}
// a() ;

3.采用new Function()的方式

小括號中最后一個參數(shù)是函數(shù)體，之前所有的參數(shù)都是形參.

 var b = new Function("x","y","z","alert(x+y+z)") ;
// b(3,4,5) ;

前面是參數(shù)，最后的是方法體

 var sayFunc=new Function("name","age","alert(name+'今年'+age+'歲了')");
 // sayFunc("李四",4);
 alert("sayFunc方法對象的方法參數(shù)個數(shù)："+sayFunc.length);
 alert(sayFunc.toString());//獲取源碼
 alert(sayFunc.valueOf());//獲取源碼

2.調(diào)用函數(shù):

調(diào)用函數(shù)的時候是用函數(shù)名來尋找的，函數(shù)名(參數(shù))

初始化函數(shù)/自調(diào)函數(shù)

(function () {alert("函數(shù)調(diào)用");})();

3.函數(shù)劫持

函數(shù)劫持:改變javascript的預(yù)定義的函數(shù)預(yù)定義好的功能

window.alert = function(x){
  document.write(x) ;
}
  alert("abc") ;

4.函數(shù)表達(dá)式

  var fun = function(){
    alert('我是函數(shù)表達(dá)式的形式')
  }
  fun();//函數(shù)調(diào)用

注意：

1.如果兩個函數(shù)的命名相同，后面的將會覆蓋前面的函數(shù)。

2.以基本語法聲明的函數(shù)，會在代碼運(yùn)行的時候，提前加載到內(nèi)存當(dāng)中，以供以后使用，但是匿名函數(shù)形式命名的函數(shù)，會在執(zhí)行到的時候，才進(jìn)行賦值

3.在不同的<script></script>塊中的函數(shù)，使用和調(diào)用的時候，應(yīng)該先定義，后執(zhí)行。

4.函數(shù)參數(shù)arguments對象

每創(chuàng)建一個函數(shù)，該函數(shù)就會隱式創(chuàng)建一個arguments數(shù)組對象，他包含有實(shí)際傳入?yún)?shù)的信息。

1.length 檢測實(shí)際傳入?yún)?shù)的個數(shù)
2.callee 對本身的調(diào)用

訪問傳入?yún)?shù)的具體的值：([下標(biāo)])

 function fun (a,b) {
   for (var i=0; i<arguments.length; i++) {
   alert(arguments[i])
   }
  }

若有不足請多多指教！希望給您帶來幫助！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對億速云的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

向AI問一下細(xì)節(jié)

js的對象與函數(shù)詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽