Js基礎(chǔ)知識5

天使之翼 ` 2019-06-29

展開全文

函數(shù)返回值

所有函數(shù)都有返回值，沒有return語句時,，默認返回內(nèi)容為undefined,，和其他面向?qū)ο蟮木幊陶Z言一樣，return語句不會阻止finally子句的執(zhí)行,。

function testFinnally(){
    try{
        return 2;
    }catch(error){
        return 1;
    }finally{
        return 0;
    }
}
testFinnally();//0

如果函數(shù)調(diào)用時在前面加上了new前綴,，且返回值不是一個對象，則返回this(該新對象),。

function fn(){
    this.a = 2;
    return 1;
}
var test = new fn();
console.log(test);//{a:2}
console.log(test.constructor);//fn(){this.a = 2;return 1;}

如果返回值是一個對象,，則返回該對象。

function fn(){
    this.a = 2;
    return {a:1};
}
var test = new fn();
console.log(test);//{a:1}
console.log(test.constructor);//Object() { [native code] }

函數(shù)參數(shù)

arguments

　　javascript中的函數(shù)定義并未指定函數(shù)形參的類型,，函數(shù)調(diào)用也未對傳入的實參值做任何類型檢查,。實際上，javascript函數(shù)調(diào)用甚至不檢查傳入形參的個數(shù),。

?

1

2

3

4

5

6

7

function add(x){

return x+1;

}

console.log(add(1));//2

console.log(add('1'));//'11'

console.log(add());//NaN

console.log(add(1,2));//2

同名形參

　　在非嚴格模式下,，函數(shù)中可以出現(xiàn)同名形參，且只能訪問最后出現(xiàn)的該名稱的形參,。

function add(x,x,x){
    return x;
}
console.log(add(1,2,3));//3

而在嚴格模式下,，出現(xiàn)同名形參會拋出語法錯誤

function add(x,x,x){
    'use strict';
    return x;
}
console.log(add(1,2,3));//SyntaxError: Duplicate parameter name not allowed in this context

參數(shù)個數(shù)

　　當實參比函數(shù)聲明指定的形參個數(shù)要少，剩下的形參都將設(shè)置為undefined值

function add(x,y){
    console.log(x,y);//1 undefined
}
add(1);

常常使用邏輯或運算符給省略的參數(shù)設(shè)置一個合理的默認值

function add(x,y){
    y = y || 2;
    console.log(x,y);//1 2
}
add(1);

　　[注意]實際上,，使用y || 2是不嚴謹?shù)?，顯式地設(shè)置假值(undefined、null,、false,、0、-0、”,、NaN)也會得到相同的結(jié)果,。所以應(yīng)該根據(jù)實際場景進行合理設(shè)置

　　當實參比形參個數(shù)要多時，剩下的實參沒有辦法直接獲得,，需要使用即將提到的arguments對象

　　javascript中的參數(shù)在內(nèi)部用一個數(shù)組表示,。函數(shù)接收到的始終都是這個數(shù)組,，而不關(guān)心數(shù)組中包含哪些參數(shù),。在函數(shù)體內(nèi)可以通過arguments對象來訪問這個參數(shù)數(shù)組，從而獲取傳遞給函數(shù)的每一個參數(shù),。arguments對象并不是Array的實例,，它是一個類數(shù)組對象，可以使用方括號語法訪問它的每一個元素

function add(x){
    console.log(arguments[0],arguments[1],arguments[2])//1 2 3
    return x+1;
}
add(1,2,3);

arguments對象的length屬性顯示實參的個數(shù),，函數(shù)的length屬性顯示形參的個數(shù)

function add(x,y){
    console.log(arguments.length)//3
    return x+1;
}
add(1,2,3);
console.log(add.length);//2

形參只是提供便利,，但不是必需的

function add(){
    return arguments[0] + arguments[1];
}
console.log(add(1,2));//3

對象參數(shù)

　　當一個函數(shù)包含超過3個形參時，要記住調(diào)用函數(shù)中實參的正確順序?qū)嵲谧屓祟^疼

function arraycopy(/*array*/from,/*index*/form_start,/*array*/to,/*index*/to_start,/*integer*/length){
    //todo
}

通過名/值對的形式來傳入?yún)?shù),，這樣參數(shù)的順序就無關(guān)緊要了,。定義函數(shù)的時候，傳入的實參都寫入一個單獨的對象之中,，在調(diào)用的時候傳入一個對象,，對象中的名/值對是真正需要的實參數(shù)據(jù)

function easycopy(args){
    arraycopy(args.from,args.from_start || 0,args.to,args.to_start || 0, args.length);
}
var a = [1,2,3,4],b =[];
easycopy({from:a,to:b,length:4});

以函數(shù)為參數(shù)

函數(shù)本身是一個對象，因此可以將函數(shù)作為另一個函數(shù)的參數(shù),，進而實現(xiàn)函數(shù)回調(diào),，功能等同于c++中的函數(shù)指針

function printf(str){
    dom1.innerText += str.toString()+"\n";              //設(shè)置dom1顯示的文字。變量也可以自動調(diào)用其他js文件中的dom1變量,。dom1會先在當前文件中查詢,，然后向之前引用的js文件查詢，再向之后引用的js文件查詢
}

function callfunction(myfunction,myargument){           //函數(shù)作為其他函數(shù)的參數(shù)
    return myfunction(myargument);                      //調(diào)用回調(diào)函數(shù)
}

callfunction(printf,"hello world");

同步

　　當形參與實參的個數(shù)相同時,，arguments對象的值和對應(yīng)形參的值保持同步

function test(num1,num2){
    console.log(num1,arguments[0]);//1 1
    arguments[0] = 2;
    console.log(num1,arguments[0]);//2 2
    num1 = 10;
    console.log(num1,arguments[0]);//10 10
}
test(1);

　　[注意]雖然命名參數(shù)和對應(yīng)arguments對象的值相同,，但并不是相同的命名空間。它們的命名空間是獨立的,，但值是同步的

　　但在嚴格模式下,，arguments對象的值和形參的值是獨立的

function test(num1,num2){
    'use strict';
    console.log(num1,arguments[0]);//1 1
    arguments[0] = 2;
    console.log(num1,arguments[0]);//1 2
    num1 = 10;
    console.log(num1,arguments[0]);//10 2
}
test(1);

當形參并沒有對應(yīng)的實參時，arguments對象的值與形參的值并不對應(yīng)

function test(num1,num2){
    console.log(num1,arguments[0]);//undefined,undefined
    num1 = 10;
    arguments[0] = 5;
    console.log(num1,arguments[0]);//10,5
}
test();

內(nèi)部屬性【callee】

　　arguments對象有一個名為callee的屬性,，該屬性是一個指針,，指向擁有這個arguments對象的函數(shù)

　　下面是經(jīng)典的階乘函數(shù)

function factorial(num){
    if(num <=1){
        return 1;
    }else{
        return num* factorial(num-1);
    }
}    
console.log(factorial(5));//120

但在嚴格模式下，訪問這個屬性會拋出TypeError錯誤

function factorial(num){
    'use strict';
    if(num <=1){
        return 1;
    }else{
        return num* arguments.callee(num-1);
    }
}    
//TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
console.log(factorial(5));

這時,，可以使用具名的函數(shù)表達式

var factorial = function fn(num){
    if(num <=1){
        return 1;
    }else{
        return num*fn(num-1);
    }
};    
console.log(factorial(5));//120

【caller】

　　實際上有兩個caller屬性

【1】函數(shù)的caller

　　函數(shù)的caller屬性保存著調(diào)用當前函數(shù)的函數(shù)的引用,，如果是在全局作用域中調(diào)用當前函數(shù)，它的值是null

function outer(){
    inner();
}
function inner(){
    console.log(inner.caller);//outer(){inner();}
}
outer();

function inner(){
    console.log(inner.caller);//null
}
inner();

在嚴格模式下，訪問這個屬性會拋出TypeError錯誤

function inner(){
    'use strict';
    //TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context
    console.log(inner.caller);
}
inner();

【2】arguments對象的caller

　　該屬性始終是undefined,，定義這個屬性是為了分清arguments.caller和函數(shù)的caller屬性

function inner(x){
    console.log(arguments.caller);//undefined
}
inner(1);

同樣地,，在嚴格模式下，訪問這個屬性會拋出TypeError錯誤

function inner(x){
    'use strict';
    //TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context
    console.log(arguments.caller);
}
inner(1);

函數(shù)重載

　　javascript函數(shù)不能像傳統(tǒng)意義上那樣實現(xiàn)重載,。而在其他語言中,，可以為一個函數(shù)編寫兩個定義，只要這兩個定義的簽名(接受的參數(shù)的類型和數(shù)量)不同即可

　　javascript函數(shù)沒有簽名,，因為其參數(shù)是由包含0或多個值的數(shù)組來表示的,。而沒有函數(shù)簽名，真正的重載是不可能做到的

//后面的聲明覆蓋了前面的聲明
function addSomeNumber(num){
    return num + 100;
}
function addSomeNumber(num){
    return num + 200;
}
var result = addSomeNumber(100);//300

只能通過檢查傳入函數(shù)中參數(shù)的類型和數(shù)量并作出不同的反應(yīng),，來模仿方法的重載

function doAdd(){
    if(arguments.length == 1){
        alert(arguments[0] + 10);
    }else if(arguments.length == 2){
        alert(arguments[0] + arguments[1]);
    }
}
doAdd(10);//20
doAdd(30,20);//50

參數(shù)傳遞

　　javascript中所有函數(shù)的參數(shù)都是按值傳遞的,。也就是說，把函數(shù)外部的值復(fù)制到函數(shù)內(nèi)部的參數(shù),，就和把值從一個變量復(fù)制到另一個變量一樣

【1】基本類型值

　　在向參數(shù)傳遞基本類型的值時,，被傳遞的值會被復(fù)制給一個局部變量(命名參數(shù)或arguments對象的一個元素)

function addTen(num){
    num += 10;
    return num;
}
var count = 20;
var result = addTen(count);
console.log(count);//20，沒有變化
console.log(result);//30

【2】引用類型值

　　在向參數(shù)傳遞引用類型的值時,，會把這個值在內(nèi)存中的地址復(fù)制給一個局部變量,，因此這個局部變量的變化會反映在函數(shù)的外部

function setName(obj){
    obj.name = 'test';
}
var person = new Object();
setName(person);
console.log(person.name);//'test'

當在函數(shù)內(nèi)部重寫引用類型的形參時，這個變量引用的就是一個局部對象了,。而這個局部對象會在函數(shù)執(zhí)行完畢后立即被銷毀

function setName(obj){
    obj.name = 'test';
    console.log(person.name);//'test'
    obj = new Object();
    obj.name = 'white';
    console.log(person.name);//'test'
}
var person = new Object();
setName(person);

函數(shù)屬性

【length屬性】

　　arguments對象的length屬性表示實參個數(shù),，而函數(shù)的length屬性則表示形參個數(shù)

function add(x,y){
    console.log(arguments.length)//3
    console.log(add.length);//2
}
add(1,2,3);

【name屬性】

　　函數(shù)定義了一個非標準的name屬性，通過這個屬性可以訪問到給定函數(shù)指定的名字,，這個屬性的值永遠等于跟在function關(guān)鍵字后面的標識符,，匿名函數(shù)的name屬性為空

//IE11-瀏覽器無效，均輸出undefined
//chrome在處理匿名函數(shù)的name屬性時有問題,，會顯示函數(shù)表達式的名字
function fn(){};
console.log(fn.name);//'fn'
var fn = function(){};
console.log(fn.name);//'',，在chrome瀏覽器中會顯示'fn'
var fn = function abc(){};
console.log(fn.name);//'abc'

　　[注意]name屬性早就被瀏覽器廣泛支持，但是直到ES6才將其寫入了標準

　　ES6對這個屬性的行為做出了一些修改,。如果將一個匿名函數(shù)賦值給一個變量,，ES5的name屬性，會返回空字符串,，而ES6的name屬性會返回實際的函數(shù)名

var func1 = function () {};
func1.name //ES5:  ""
func1.name //ES6: "func1"

如果將一個具名函數(shù)賦值給一個變量,，則ES5和ES6的name屬性都返回這個具名函數(shù)原本的名字

var bar = function baz() {};
bar.name //ES5: "baz"
bar.name //ES6: "baz"

Function構(gòu)造函數(shù)返回的函數(shù)實例，name屬性的值為“anonymous”

?

1	`(new` `Function).name` `// "anonymous"`

　 bind返回的函數(shù),，name屬性值會加上“bound ”前綴

?

1

2

3

function foo() {};

foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

【prototype屬性】

　　每一個函數(shù)都有一個prototype屬性,，這個屬性指向一個對象的引用，這個對象稱做原型對象(prototype object),。每一個函數(shù)都包含不同的原型對象,。將函數(shù)用做構(gòu)造函數(shù)時,，新創(chuàng)建的對象會從原型對象上繼承屬性

?

1

2

3

4

function fn(){};

var obj = new fn;

fn.prototype.a = 1;

console.log(obj.a);//1

函數(shù)方法

【apply()和call()】

　　每個函數(shù)都包含兩個非繼承而來的方法：apply()和call()。這兩個方法的用途都是在特定的作用域中調(diào)用函數(shù),，實際上等于函數(shù)體內(nèi)this對象的值

　　要想以對象o的方法來調(diào)用函數(shù)f(),，可以這樣使用call()和apply()

?

1 2	`f.call(o);` `f.apply(o);`

　　假設(shè)o中不存在m方法，則等價于:

?

1

2

3

o.m = f; //將f存儲為o的臨時方法

o.m(); //調(diào)用它,，不傳入?yún)?shù)

delete o.m; //將臨時方法刪除

　　下面是一個實際的例子

window.color = "red";
var o = {color: "blue"};
function sayColor(){
    console.log(this.color);
}
sayColor();            //red
sayColor.call(this);   //red
sayColor.call(window); //red
sayColor.call(o);      //blue

//sayColor.call(o)等價于:
o.sayColor = sayColor;
o.sayColor();   //blue
delete o.sayColor;

apply()方法接收兩個參數(shù)：一個是在其中運行函數(shù)的作用域(或者可以說成是要調(diào)用函數(shù)的母對象,，它是調(diào)用上下文，在函數(shù)體內(nèi)通過this來獲得對它的引用),，另一個是參數(shù)數(shù)組,。其中，第二個參數(shù)可以是Array的實例,，也可以是arguments對象

function sum(num1, num2){
    return num1 + num2;
}
//因為運行函數(shù)的作用域是全局作用域,，所以this代表的是window對象
function callSum1(num1, num2){
    return sum.apply(this, arguments);
}
function callSum2(num1, num2){
    return sum.apply(this, [num1, num2]);
}
console.log(callSum1(10,10));//20
console.log(callSum2(10,10));//20

call()方法與apply()方法的作用相同,，它們的區(qū)別僅僅在于接收參數(shù)的方式不同,。對于call()方法而言，第一個參數(shù)是this值沒有變化,，變化的是其余參數(shù)都直接傳遞給函數(shù),。換句話說，在使用call()方法時,，傳遞給函數(shù)的參數(shù)必須逐個列舉出來

?

function sum(num1, num2){

return num1 + num2;

}

function callSum(num1, num2){

return sum.call(this, num1, num2);

}

console.log(callSum(10,10)); //20

　　至于是使用apply()還是call(),，完全取決于采取哪種函數(shù)傳遞參數(shù)的方式最方便。如果打算直接傳入arguments對象,，或者包含函數(shù)中先接收到的也是一個數(shù)組,，那么使用apply()肯定更方便；否則,，選擇call()可能更合適

　　在非嚴格模式下,，使用函數(shù)的call()或apply()方法時，null或undefined值會被轉(zhuǎn)換為全局對象,。而在嚴格模式下,，函數(shù)的this值始終是指定的值

?

1

2

3

4

5

var color = 'red';

function displayColor(){

console.log(this.color);

}

displayColor.call(null);//red

?

1

2

3

4

5

6

var color = 'red';

function displayColor(){

'use strict';

console.log(this.color);

}

displayColor.call(null);//TypeError: Cannot read property 'color' of null

應(yīng)用

【1】調(diào)用對象的原生方法

var obj = {};
obj.hasOwnProperty('toString');// false
obj.hasOwnProperty = function (){
  return true;
};
obj.hasOwnProperty('toString');// true
Object.prototype.hasOwnProperty.call(obj, 'toString');// false

【2】找出數(shù)組最大元素

　　javascript不提供找出數(shù)組最大元素的函數(shù)。結(jié)合使用apply方法和Math.max方法,，就可以返回數(shù)組的最大元素

var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a);//15

【3】將類數(shù)組對象轉(zhuǎn)換成真正的數(shù)組

Array.prototype.slice.apply({0:1,length:1});//[1]
　　或者

[].prototype.slice.apply({0:1,length:1});//[1]

【4】將一個數(shù)組的值push到另一個數(shù)組中

var a = [];
Array.prototype.push.apply(a,[1,2,3]);
console.log(a);//[1,2,3]
Array.prototype.push.apply(a,[2,3,4]);
console.log(a);//[1,2,3,2,3,4]

【5】綁定回調(diào)函數(shù)的對象

　　由于apply方法（或者call方法）不僅綁定函數(shù)執(zhí)行時所在的對象,，還會立即執(zhí)行函數(shù)，因此不得不把綁定語句寫在一個函數(shù)體內(nèi),。更簡潔的寫法是采用下面介紹的bind方法

var o = {};
o.f = function () {
  console.log(this === o);
}
var f = function (){
  o.f.apply(o);
};
$('#button').on('click', f);

【bind()】

　　bind()是ES5新增的方法,，這個方法的主要作用就是將函數(shù)綁定到某個對象

　　當在函數(shù)f()上調(diào)用bind()方法并傳入一個對象o作為參數(shù)，這個方法將返回一個新的函數(shù),。以函數(shù)調(diào)用的方式調(diào)用新的函數(shù)將會把原始的函數(shù)f()當做o的方法來調(diào)用,，傳入新函數(shù)的任何實參都將傳入原始函數(shù)

　　[注意]IE8-瀏覽器不支持

function f(y){
    return this.x + y; //這個是待綁定的函數(shù)
}
var o = {x:1};//將要綁定的對象
var g = f.bind(o); //通過調(diào)用g(x)來調(diào)用o.f(x)
g(2);//3

兼容代碼

function bind(f,o){
    if(f.bind){
        return f.bind(o);
    }else{
        return function(){
            return f.apply(o,arguments);
        }
    }
}

bind()方法不僅是將函數(shù)綁定到一個對象，它還附帶一些其他應(yīng)用：除了第一個實參之外，傳入bind()的實參也會綁定到this,，這個附帶的應(yīng)用是一種常見的函數(shù)式編程技術(shù),，有時也被稱為’柯里化’(currying)

var sum = function(x,y){
    return x+y;
}
var succ = sum.bind(null,1);
succ(2); //3，x綁定到1,，并傳入2作為實參y
function f(y,z){
    return this.x + y + z;
}
var g = f.bind({x:1},2);
g(3); //6,，this.x綁定到1，y綁定到2,，z綁定到3
　　使用bind()方法實現(xiàn)柯里化可以對函數(shù)參數(shù)進行拆分

function getConfig(colors,size,otherOptions){
    console.log(colors,size,otherOptions);
}
var defaultConfig = getConfig.bind(null,'#c00','1024*768');
defaultConfig('123');//'#c00 1024*768 123'
defaultConfig('456');//'#c00 1024*768 456'

【toString()】

　　函數(shù)的toString()實例方法返回函數(shù)代碼的字符串,，而靜態(tài)toString()方法返回一個類似’[native code]’的字符串作為函數(shù)體

function test(){
    alert(1);//test
}
test.toString();/*"function test(){
                    alert(1);//test
                  }"*/
Function.toString();//"function Function() { [native code] }"

【toLocaleString()】

　　函數(shù)的toLocaleString()方法和toString()方法返回的結(jié)果相同

function test(){
    alert(1);//test
}
test.toLocaleString();/*"function test(){
                    alert(1);//test
                  }"*/
Function.toLocaleString();//"function Function() { [native code] }"

【valueOf()】

　　函數(shù)的valueOf()方法返回函數(shù)本身

function test(){
    alert(1);//test
}
test.valueOf();/*function test(){
                    alert(1);//test
                  }*/
typeof test.valueOf();//'function'
Function.valueOf();//Function() { [native code] }

原鏈：https://blog.csdn.net/luanpeng825485697/article/details/77010261

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點,。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,，謹防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報,。

久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

Js基礎(chǔ)知識5

函數(shù)返回值

函數(shù)參數(shù)

函數(shù)屬性

函數(shù)方法