編程語(yǔ)言的幾個(gè)出發(fā)點(diǎn)
變量辜纲，基礎(chǔ)語(yǔ)法 ，函數(shù)
作用域 面向?qū)ο?/p>
1.函數(shù)的四種調(diào)用模式
- 函數(shù)模式
- 方法模式
- 構(gòu)造器模式
- 上下文模式
1.1函數(shù)模式
1 函數(shù)的定義方式
1> 聲明式
2> 表達(dá)式式
3> Function
- 單獨(dú)獨(dú)立調(diào)用的就是函數(shù)
- 函數(shù)名( 參數(shù) )
- this 表示全局對(duì)象
注意：任何自調(diào)用函數(shù)都是函數(shù)模式
代碼演示：
function foo(){
console.log(this);
}
foo(); //this指的是全局對(duì)象window
1.2 方法調(diào)用模式 method
方法本身就是函數(shù), 但是方法不是單獨(dú)獨(dú)立的調(diào)用, 而是通過(guò)一個(gè)對(duì)象引導(dǎo)調(diào)用.
obj.方法( 參數(shù) )
代碼演示：
var length = 10;
function fn() {
console.log( this.length );
}
var obj = {
length: 5,
method: function ( fn ) {
fn(); //10
arguments[ 0 ](); //2
}
};
obj.method( fn, 1 );
1.3 構(gòu)造器模式(構(gòu)造函數(shù)模式, 構(gòu)造方法模式)
使用 new 關(guān)鍵字引導(dǎo)
-> 執(zhí)行步驟
var p = new Person();
new 是一個(gè)運(yùn)算符, 專門(mén)用來(lái)申請(qǐng)創(chuàng)建對(duì)象, 創(chuàng)建出來(lái)的對(duì)象傳遞給構(gòu)造函數(shù)的 this
利用構(gòu)造函數(shù)對(duì)其初始化
function Person () {
this.name = 'jim',
this.age = 19;
this.gender = 'male';
}
-> 返回值
如果不寫(xiě) return 語(yǔ)句, 那么 構(gòu)造函數(shù) 默認(rèn)返回 this
如果在構(gòu)造函數(shù)中寫(xiě)上 return 語(yǔ)句, 并緊跟基本類型( return num, return 1223 ). 則忽略返回類型.
如果在構(gòu)造函數(shù)中寫(xiě)上 return 語(yǔ)句, 并且緊跟引用類型, 那么構(gòu)造函數(shù)返回該引用類型數(shù)據(jù), 而忽略 this
注意：** 如果調(diào)用構(gòu)造函數(shù)的時(shí)候, 構(gòu)造函數(shù)沒(méi)有參數(shù), 圓括號(hào)是可以省略的**
1.4上下文調(diào)用模式
- 語(yǔ)法形式
- 函數(shù)名.call( ... )
- 函數(shù)名.apply( ... )
- 語(yǔ)法形式
注意：這兩種形式功能完全一樣, 唯一不同的是參數(shù)的形式.
-> 帶有參數(shù)的函數(shù)如何實(shí)現(xiàn)上下文調(diào)用
function foo ( num1, num2 ) {
console.log( this );
return num1 + num2;
}
// 函數(shù)調(diào)用模式
var res1 = foo( 123, 567 );
// 方法調(diào)用
var o = { name: 'jim' };
o.func = foo;
var res2 = o.func( 123, 567 );
使用 apply 進(jìn)行調(diào)用, 如果函數(shù)是帶有參數(shù)的. apply 的第一個(gè)參數(shù)要么是 null 要么是對(duì)象
如果是 null 就是函數(shù)調(diào)用, 如果是 對(duì)象就是 方法對(duì)象, 該對(duì)象就是宿主對(duì)象, 后面緊跟一個(gè)
數(shù)組參數(shù), 將函數(shù)的參數(shù)依次放在數(shù)組中.
例如: 函數(shù)模式 foo( 123, 567 );
apply foo.apply( null, [ 123, 567 ] )
如果有一個(gè)函數(shù)調(diào)用: func( '張三', 19, '男' ), 將其修改成 apply 模式
func.apply( null, [ '張三', 19, '男'] )
方法模式: o.func( 123, 567 )
apply foo.apply( o, [ 123, 567 ] )
call 調(diào)用
在使用 apply 調(diào)用的時(shí)候, 函數(shù)參數(shù), 必須以數(shù)組的形式存在. 但是有些時(shí)候數(shù)組封裝比較復(fù)雜
所以引入 call 調(diào)用, call 調(diào)用與 apply 完全相同, 唯一不同是是參數(shù)不需要使用數(shù)組.
foo( 123, 567 );
foo.apply( null, [ 123, 567 ] );
foo.call( null, 123, 567 );
擴(kuò)展借用構(gòu)造函數(shù)繼承
借用構(gòu)造方法實(shí)現(xiàn)繼承
function Person ( name, age, gender ) {
this.name = name;
this.age = age;
this.gender = gender;
}
function Student ( name, age, gender, course ) {
Person.call( this, name, age, gender );
this.course = course;
}
var p = new Student ( 'jim', 19, 'male', '前端' );
2.函數(shù)的 bind 方法
// 讓 t 包含函數(shù)體( 原來(lái) ), 同時(shí)還包含 對(duì)象
var t = document.getElementsByTagName.bind( document ),
arr = [];
arr.push.apply( arr, t( 'p' ) );
arr.push.apply( arr, t( 'div' ) );
t('p') 相當(dāng)于 document.getElementsByTagName（'p'）;
3. Object.prototype 的成員
1) constructor
2) hasOwnProperty 判斷該屬性是否為自己提供
3) propertyIsEnumerable 判斷屬性是否可以枚舉
4) isPrototypeOf 判斷是否為原型對(duì)象
5) toString, toLocaleString, valueOf
4.getter 與 setter 的語(yǔ)法糖
語(yǔ)法糖: 為了方便開(kāi)發(fā)而給出的語(yǔ)法結(jié)構(gòu)
var o = (function () {
var num = 123;
return {
get_num: function () {
return num;
},
set_num: function ( v ) {
num = v;
}
};
})();
// 獲得數(shù)據(jù)
o.get_num(); => o.num 形式
// 設(shè)置
o.set_num( 456 ); => o.num = 456 形式
var o = (function () {
var num = 123;
return {
// get 名字 () { 邏輯體 }
get num () {
return num;
}
// set 名字 ( v ) { 邏輯體 }
set num ( v ) {
num = v;
}
};
})();
5.數(shù)組新增方法介紹
ES5 中引入的部分?jǐn)?shù)組方法
- forEach
- map
- filter
- some
- every
- indexOf
- lastIndexOf
演示代碼：
// 1 forEach
// var arr = [ 'hello', ' js', { }, function () {} ];
// // 遍歷 數(shù)組
// arr.forEach( function ( v, i ) {
// console.log( i + '=====' + v );
// });
// 2 map 映射
// 語(yǔ)法: 數(shù)組.map( fn )
// 返回一個(gè)數(shù)組, 數(shù)組的每一個(gè)元素就是 map 函數(shù)中的 fn 的返回值
// var arr = [ 1, 2, 3, 4 ];
// 數(shù)學(xué)中: x -> x * x
// var a = arr.map(function ( v, i ) {
// return v * v;
// });
// 3 filter 就是篩選
// 語(yǔ)法: 數(shù)組.filter( function ( v, i ) { return true/false })
// var arr = [ 1, 2, 3, 4, 5, 6 ];
// var a = arr.filter( function ( v ) { return v % 2 === 1; });
// 4 some 判斷數(shù)組中至少有一個(gè)數(shù)據(jù)復(fù)合要求 就返回 true, 否則返回 false
// var arr = [ '123', {}, function () {}, '123' ];
// 判斷數(shù)組中至少有一個(gè)數(shù)數(shù)字
// var isTrue = arr.some( function ( v ) { return typeof v === 'number'; } );
// 5 every 必須滿足所有元素都復(fù)合要求才會(huì)返回 true
// var arr = [ 1, 2, 3, 4, 5, '6' ];
// var isTrue = arr.every( function ( v ) { return typeof v === 'number'; } );
// 6 indexOf 在數(shù)組中查找元素, 如果含有該元素, 返回元素的需要( 索引 ), 否則返回 -1
// var arr = [ 1, 2, 3, 4, 5 ];
// var res = arr.indexOf( 4 );
// console.log( res );
// var arr = [ 1, 2, 3, 4, 5, 4, 5, 6 ];
// var res = arr.indexOf( 4, 4 );
// console.log( res );
// 7 lastIndexOf 從右往左找
// var arr = [ 1, 2, 3, 4, 5, 4, 5, 6 ];
// var res = arr.lastIndexOf( 4 );
// console.log( res );
動(dòng)態(tài)創(chuàng)建函數(shù)
var Person=new Function('name','console.log(name)');
var p1=new Person('dd');
