函數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 創(chuàng)建函數(shù)的方式一：
* - 使用函數(shù)聲明來創(chuàng)建一個函數(shù)
* - 語法：
* function 函數(shù)的名字([形參1,形參2,...形參n]){
* 語句...
* }
*/
//創(chuàng)建一個函數(shù)
function fun(){
console.log("語句一");
console.log("語句二");
console.log("語句三");
}
//調(diào)用函數(shù)
fun();
/*
* 創(chuàng)建函數(shù)的方式二：
* - 使用函數(shù)表達(dá)式來創(chuàng)建一個函數(shù)
* - 語法:
* var 變量 = function([形參1,形參2,...形參n]){
* 語句...
* };
*/
var fun2 = function(){
alert("我是又一個函數(shù)");
};
//調(diào)用函數(shù)
fun2();
</script>
</head>
<body>
</body>
</html>
js中函數(shù)可以作為參數(shù)傳遞
第一種寫法
function say (value) {
alert(value);
}
function execute (someFunction, value) {
someFunction(value);//回調(diào)函數(shù)
}
execute(say, 'hi js.');
上面代碼是將say方法作為參數(shù)傳遞給execute方法
第二種寫法
var say = function(value) {
alert(value);
}
function execute (someFunction, value) {
someFunction(value);//回調(diào)函數(shù)
}
execute(say, 'hi js.');
第三種寫法
function execute (someFunction, value) {
someFunction(value);//回調(diào)函數(shù)
}
execute(function(value) {
alert(value);
}, 'hi js.');
上述代碼中execute方法的第一個參數(shù)是一個匿名函數(shù)鹅心。
何謂匿名函數(shù)
沒有函數(shù)名的函數(shù)
1 分析: 函數(shù)為何要有名字? 是為了方便下次使用.
2 用途: 通常不希望再次使用(即只使用一次的)的函數(shù)可以定義為匿名函數(shù).
上面的函數(shù)say被叫做回調(diào)函數(shù)
回調(diào)函數(shù)
就是你調(diào)用別人（execute），然后別人會調(diào)用你（say），簡言之：你寫一個函數(shù)（say）伞广，但不是由你調(diào)用婶博，是由你調(diào)用的一個函數(shù)（execute）調(diào)用榔昔。
函數(shù)做為返回值
function fn2(a){
return function (b){
alert(a+b);
};
}
fn2(20)(10);//30
arguments
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
*在調(diào)用函數(shù)時蜈项，瀏覽器還傳遞了另一個隱含的參數(shù)
* 還有一個參數(shù)叫做arguments
*
* arguments是一個類數(shù)組對象，在它里邊保存著函數(shù)執(zhí)行時的實參
* 函數(shù)的所有的實參都在arguments中保存,
* 通過arguments即使不定義形參也可以使用參數(shù)
*
*
*/
function fun(a,b,c){
//獲取實參的數(shù)量
//console.log(arguments.length);
//獲取指定的實參
//實參會保存到arguments對象中指定的位置
//console.log(arguments[2]);
}
fun("hello",123,true);
</script>
</head>
<body>
</body>
</html>
變量作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 作用域（Scope）
* - 作用域簡單來說就是指一個變量的作用的范圍
* - 在JS中作用域分成兩種：
* 1.全局作用域
* 2.函數(shù)作用域
*
* - 全局作用域：
* 1.所有直接在script標(biāo)簽中編寫的代碼都在全局作用域中
* 2.全局作用域在打開網(wǎng)頁時創(chuàng)建晨雳，在網(wǎng)頁關(guān)閉時銷毀
* 3.全局作用域中有一個全局對象window行瑞，
* window代表的是瀏覽器的窗口，
* 在全局作用域中創(chuàng)建的變量都會作為window對象的屬性保存
* 在全局作用域中創(chuàng)建的函數(shù)都會作為window對象的方法保存
* 4.在全局作用域中創(chuàng)建的變量都是全局變量餐禁，可以在頁面的任意位置訪問
*/
var a = 123;
b = 456;
function fun(){
console.log(b);
console.log(window.a);
console.log(window.b);
console.log("我是全局中的函數(shù)fun血久。。帮非。氧吐。");
}
fun();
//window.fun();
//window.alert("hello");
</script>
</head>
<body>
</body>
</html>
變量和函數(shù)的聲明提前：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//如果不寫var绷旗，直接為變量賦值，則相當(dāng)于為window對象添加屬性
//window.a = 10;
//a = 10;
/*
* 變量的聲明提前
* - 使用var關(guān)鍵字聲明的變量副砍，都會在所有的代碼執(zhí)行之前被聲明衔肢，但是不會賦值
* 賦值會直到執(zhí)行到賦值的代碼時才執(zhí)行
* - 如果不適用var關(guān)鍵字聲明變量，則不會有聲明提前的特性
*
* 函數(shù)的聲明提前
* - 使用函數(shù)聲明創(chuàng)建的函數(shù)豁翎，會在所有的代碼執(zhí)行之前創(chuàng)建角骤，
* 所以我們可以在函數(shù)聲明前就去調(diào)用函數(shù)
* - 使用函數(shù)表達(dá)式創(chuàng)建的函數(shù)，沒有這個特性心剥，所以不能在它創(chuàng)建之前調(diào)用
*/
console.log("a = "+a);
var a = 10;
//fun();
fun2();
//使用函數(shù)聲明來創(chuàng)建一個函數(shù)
function fun(){
console.log("我是fun函數(shù)邦尊。。优烧。蝉揍。");
}
//使用函數(shù)表達(dá)式創(chuàng)建一個函數(shù)
var fun2 = function(){
console.log("----->我是fun2.。畦娄。又沾。");
};
</script>
</head>
<body>
</body>
</html>
函數(shù)作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 函數(shù)作用域
* - 函數(shù)作用域可以理解為是全局中的小的作用域
* - 函數(shù)作用域在函數(shù)調(diào)用時創(chuàng)建睦疫，在調(diào)用結(jié)束時銷毀
* 每調(diào)用一次函數(shù)就會創(chuàng)建一個新的函數(shù)作用域
* - 在函數(shù)作用域中可以訪問到全局變量,
* 而在全局中無法訪問到函數(shù)作用域中的變量
* 在函數(shù)中創(chuàng)建的變量如果不寫var耗跛，則會變成全局變量
* - 當(dāng)我們在函數(shù)中使用一個變量時，它會先在自身的作用域中尋找剧包，
* 如果有就直接使用驳癌，如果沒有則去上一級作用域中尋找滑燃，
* 找到則使用，沒找到則繼續(xù)尋找颓鲜，直到找到全局作用域為止
* 如果全局作用域中依然沒有表窘，則報錯ReferenceError
* - 在函數(shù)作用域中也適用變量和函數(shù)的聲明提前
*
*/
//創(chuàng)建一個全局變量a
var a = "全局中的a";
function fun(){
//console.log(a);
//window.b = ...
var b = "---> 函數(shù)作用域中的b";
//console.log(b);
}
//fun();
//console.log(b);
//創(chuàng)建全局變量c
var c = "全局c";
console.log(window.c);
/*function fun2(){
//創(chuàng)建一個局部變量c
var c = "---> 函數(shù)中的c";
console.log(c);
}
fun2();*/
function fun3(){
//var c = "fun3中的c";
function fun4(){
//var c = "fun4中的c";
console.log(c);
}
//調(diào)用fun4
fun4();
}
//fun3();
</script>
</head>
<body>
</body>
</html>
例子2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a = "全局a";
function fun(){
var a = "--> 函數(shù)a";
//如果在函數(shù)作用域中想訪問全局變量可以通過window對象來訪問
console.log(window.a);
}
//fun();
a = 20;
/*
* 在函數(shù)內(nèi)部使用var關(guān)鍵字聲明的變量也會被聲明提前，
* 它的聲明會在所有的代碼執(zhí)行前執(zhí)行
*
* 在函數(shù)內(nèi)部使用函數(shù)聲明創(chuàng)建的函數(shù)甜滨，也會在所有的代碼執(zhí)行之前被創(chuàng)建
*/
function fun2(){
fun3();
//console.log(a);
//var a = 10;
function fun3(){
console.log("我是fun2內(nèi)部的函數(shù)乐严。。艳吠。");
}
}
fun2();
</script>
</head>
<body>
</body>
</html>
另一個例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// var a = 10;
//
// function fun(){
//
// a = 5;
//
// }
//
// fun();
//
// console.log(a);//10 ---函數(shù)作用域在函數(shù)調(diào)用時創(chuàng)建麦备，在調(diào)用結(jié)束時銷毀
var a = 123;
/*
* 定義形參就相當(dāng)于在函數(shù)中聲明了對應(yīng)的變量
*/
function fun(a) {
alert(a);
a = 456;
}
fun(); //undefined
alert(a); //123
var a = 123;
function fun(a) {
alert(a);
a = 456;
}
fun(123); //123
alert(a); //123
</script>
</head>
<body>
</body>
</html>
類的定義
//class關(guān)鍵字必須是小寫。 后面就是跟的類名
class PersonClass {
// 等效于 PersonType 構(gòu)造函數(shù)昭娩。
constructor(name) { //這個表示類的構(gòu)造函數(shù)。constuctor也是關(guān)鍵字必須小寫黍匾。
this.name = name; //創(chuàng)建屬性栏渺。 也叫當(dāng)前類型的自有屬性。
}
sayName() {
console.log(this.name);
}
}
var person = new PersonClass("Nicholas");
person.sayName(); // 輸出 "Nicholas"
繼承
class Father{
constructor(name){
this.name = name;
}
sayName(){
console.log(this.name);
}
}
class Son extends Father{ //extents后面跟表示要繼承的類型
constructor(name, age){
super(name);
this.age = age;
}
//子類獨(dú)有的方法
sayAge(){
console.log(this.age);
}
}
var son1 = new Son("李四", 30);
son1.sayAge();
son1.sayName();
子類重寫父類的方法
class Father{
constructor(name){
this.name = name;
}
sayName(){
console.log(this.name);
}
}
class Son extends Father{ //extents后面跟表示要繼承的類型
constructor(name, age){
super(name); //相當(dāng)于以前的：Father.call(this, name);
this.age = age;
}
//子類獨(dú)有的方法
sayAge(){
console.log(this.age);
}
//子類中的方法會屏蔽到父類中的同名方法锐涯。
sayName(){
super.sayName(); //調(diào)用被覆蓋的父類中的方法磕诊。
console.log("我是子類的方法，我屏蔽了父類：" + name);
}
}
var son1 = new Son("李四", 30);
son1.sayAge();
son1.sayName();
