js的對象與函數(shù)詳解
一、對象
就是人們要研究的任何事物，不僅能表示具體事物，還能表示抽象的規(guī)則，計(jì)劃或事件。
屬性的無序集合，每個(gè)屬性可以存一個(gè)值(原始值，對象，函數(shù))
對象的特性:封裝，盡可能的隱藏對象的部分細(xì)節(jié)，使其受到保護(hù)。只保留有限的接口和外部發(fā)生聯(lián)系。
js 中{},[] 來定義數(shù)組和對象
1.{ } 大括號，表示定義一個(gè)對象，大部分情況下要有成對的屬性和值，或是函數(shù)。
2.[ ]中括號，表示一個(gè)數(shù)組，也可以理解為一個(gè)數(shù)組對象。
3.{ } 和[ ] 一起使用，我們前面說到，{ } 是一個(gè)對象，[ ] 是一個(gè)數(shù)組，我們可以組成一個(gè)對象數(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("會(huì)吃");
}
};
alert(marry.name);
alert(marry.age);
marry.shout();
marry.action();
2.定義對象的內(nèi)存分別
當(dāng)我們創(chuàng)建一個(gè)對象 ren，會(huì)在棧內(nèi)存中保存一個(gè)地址，棧為長度不可變的地址。
而棧中的地址就對應(yīng)堆中的存儲(chǔ)地址。堆中的存儲(chǔ)地址，只要實(shí)例化會(huì)在堆中開辟一塊空間，地址就是棧的地址，內(nèi)容就是實(shí)例化對象里面的內(nèi)容，如name，sex，eat。可以通過地址引用，訪問里面的屬性和方法。
當(dāng)我們再實(shí)例化一個(gè)對象，又會(huì)保存另一個(gè)地址及開辟一塊空間。
代碼段，共同的屬性或方法放在代碼段中，不在堆中。只執(zhí)行一次，節(jié)省內(nèi)存空間。代碼段會(huì)一直存在內(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è)字母大寫。
構(gòu)造函數(shù)模式優(yōu)于工廠模式的原因就是，構(gòu)造函數(shù)模式中的對象實(shí)例(person1)通過constructor屬性或instanceof操作符可以驗(yàn)證person1既是Object的實(shí)例，也是Person的實(shí)例，同時(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("會(huì)吃");
};
}
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è)一個(gè)對象有上千個(gè)實(shí)例，它就會(huì)復(fù)制上千個(gè)功能相同的方法，這顯然是不可取的。
我們也可以把sayName()函數(shù)的定義戰(zhàn)役到構(gòu)造函數(shù)的外部，這樣我們就將sayName屬性設(shè)置成等于全局的sayName函數(shù)，這樣實(shí)例化對象就共享全局作用域中的同一個(gè)sayName(),解決了構(gòu)造函數(shù)對象方法的多次創(chuàng)建問題。但是全局作用域定義的sayName()函數(shù)只能被某個(gè)對象調(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動(dòng)態(tài)構(gòu)造對象
<script type="text/javascript">
/* function speak(something){
alert(something);
} */
/* var p=new Object();
p.name="Jack"; // 動(dòng)態(tài)的添加屬性
p.func=speak; // 動(dòng)態(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)前對象動(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)建的每一個(gè)函數(shù)都有一個(gè)prototype(原型)屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對象，這個(gè)對象中包含著所有對象實(shí)例的屬性和方法，這個(gè)對象就是原型對象。通俗的說，原型對象中的方法和屬性可以被所有對象的實(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();
1.工廠函數(shù)封裝，通過一個(gè)函數(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;//那個(gè)對象引用this就代表那個(gè)對象
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í)例的屬性值(這個(gè)值可以通過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法表示的時(shí)候，原型對象的constructor屬性不在指向Person，因?yàn)槊縿?chuàng)建一個(gè)函數(shù)，同時(shí)會(huì)創(chuàng)建它的prototype對象，用面向?qū)ο笳Z法本質(zhì)上相當(dāng)于重寫了prototype對象，constructor屬性也會(huì)變成新對象的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í)例都有他自己私有的屬性，這時(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()的方式
小括號中最后一個(gè)參數(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ù)個(gè)數(shù)："+sayFunc.length);
alert(sayFunc.toString());//獲取源碼
alert(sayFunc.valueOf());//獲取源碼
2.調(diào)用函數(shù):
調(diào)用函數(shù)的時(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.如果兩個(gè)函數(shù)的命名相同，后面的將會(huì)覆蓋前面的函數(shù)。
2.以基本語法聲明的函數(shù)，會(huì)在代碼運(yùn)行的時(shí)候，提前加載到內(nèi)存當(dāng)中，以供以后使用，但是匿名函數(shù)形式命名的函數(shù)，會(huì)在執(zhí)行到的時(shí)候，才進(jìn)行賦值
3.在不同的<script></script>塊中的函數(shù)，使用和調(diào)用的時(shí)候，應(yīng)該先定義，后執(zhí)行。
4.函數(shù)參數(shù)arguments對象
每創(chuàng)建一個(gè)函數(shù)，該函數(shù)就會(huì)隱式創(chuàng)建一個(gè)arguments數(shù)組對象，他包含有實(shí)際傳入?yún)?shù)的信息。
- 1.length 檢測實(shí)際傳入?yún)?shù)的個(gè)數(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í)價(jià)值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
這篇文章主要是對JavaScript中的連字符進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了小程序Request的另類用法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
window對象的alert和confirm標(biāo)準(zhǔn)方法在不同瀏覽器的顯示效果不太相同，有個(gè)相同點(diǎn)是都不是很美觀。本文對此解決方法進(jìn)行介紹：使用js和css分別仿照它們，提供另一套函數(shù)，使在不同瀏覽器的有著相同的體驗(yàn)效果。下面就跟小編一起來看下吧2016-12-12
javascript實(shí)現(xiàn)根據(jù)iphone屏幕方向調(diào)用不同樣式表的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)根據(jù)iphone屏幕方向調(diào)用不同樣式表的方法,涉及javascript針對樣式表動(dòng)態(tài)操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-07-07
分享幾個(gè)JavaScript運(yùn)算符的使用技巧
這篇文章主要介紹了分享幾個(gè)JavaScript運(yùn)算符的使用技巧，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-04-04
這篇文章主要給大家介紹了關(guān)于javascript類數(shù)組的深入理解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JavaScript對象封裝的簡單實(shí)現(xiàn)方法(3種方法)
這篇文章主要介紹了JavaScript對象封裝的簡單實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了3種簡單實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01
本文主要介紹了JavaScript的閉包及應(yīng)用。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JavaScript 產(chǎn)生不重復(fù)的隨機(jī)數(shù)三種實(shí)現(xiàn)思路
在 JavaScript 中，一般產(chǎn)生的隨機(jī)數(shù)會(huì)重復(fù)，但是有時(shí)我們需要不重復(fù)的隨機(jī)數(shù)，如何實(shí)現(xiàn)?本文給于解決方法，需要的朋友可以參考下2012-12-12
本文給大家分享的是使用純JS實(shí)現(xiàn)的簡單的拖拽效果的插件，算是對自己javascript學(xué)習(xí)的一個(gè)小的檢驗(yàn)，如果小伙伴們需要復(fù)雜的拖拽效果，還是考慮jQuery的draggable吧，更成熟一些。2015-03-03