JavaScript基礎(chǔ)之函數(shù)詳解
一、函數(shù)簡介
1.1.函數(shù)的創(chuàng)建
1.函數(shù)創(chuàng)建的三種方式
// 方式1:字符串封裝代碼創(chuàng)建函數(shù)
var fun = new Function("console.log('hello 我是第一個(gè)函數(shù)');");
console.log(fun);
// 函數(shù)在被調(diào)用時(shí)執(zhí)行
fun()
// 方式2:函數(shù)聲明
function fun2() {
console.log(fun2)
}
fun2()
// 方式3:函數(shù)表達(dá)式
var fun3 = function () {
console.log("我是匿名函數(shù)的封裝的代碼")
};
console.log(fun3)
fun3();
1.2.函數(shù)的參數(shù)和返回值
1.函數(shù)的實(shí)參可以是一個(gè)對(duì)象或函數(shù)
function mianji(r){
return 3.14 * r * r;
}
function fun(a) {
console.log("a = " + a)
}
fun(mianji(10))
fun(mianji)
2.函數(shù)的返回值可以是一個(gè)對(duì)象或函數(shù):
function fun4(){
function fun5(){
alert("我是fun5")
}
return fun5;
}
a = fun4();
console.log(a) //輸出fun5函數(shù)體
a() //輸出"我是fun5"
fun4()() //輸出"我是fun5"
二、函數(shù)的類型
2.1. 構(gòu)造函數(shù)
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function () {
alert(this.name)
};
}
var per = new Person("張三", 15, "男")
var per2 = new Person("李四", 16, "女")
var per3 = new Person("王五", 17, "男")
console.log(per)
構(gòu)造函數(shù)執(zhí)行流程:
1.立刻創(chuàng)建一個(gè)對(duì)象
2.將新建的對(duì)象設(shè)置為函數(shù)中this
3.逐行執(zhí)行函數(shù)中的代碼
4.新建的對(duì)象最為返回值返回
總結(jié): 如上為構(gòu)造函數(shù),必須用new關(guān)鍵字調(diào)用,普通函數(shù)時(shí)直接調(diào)用,用this替代obj
2.2. 立即執(zhí)行函數(shù)
(function(){
alert("我是一個(gè)匿名函數(shù)")
})
// 函數(shù)定義完,立即被調(diào)用,稱為立即執(zhí)行函數(shù)
2.3. 構(gòu)造函數(shù)的原型prototype
1.JavaScript 規(guī)定,每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype 屬性。
2.構(gòu)造函數(shù)通過原型分配的函數(shù)是所有對(duì)象所共享的
3.我們可以把那些不變的方法,直接定義在 prototype 對(duì)象上,這樣所有對(duì)象的實(shí)例就可以共享這些方法。
簡介:每一個(gè)對(duì)象都會(huì)有一個(gè)屬性 proto 指向構(gòu)造函數(shù)的 prototype 原型對(duì)象,實(shí)例對(duì)象使用構(gòu)造函數(shù) prototype 原型對(duì)象的屬性和方法,因?yàn)閷?duì)象有 proto 原型的存在。

2.4. 函數(shù)中的this指向
1.當(dāng)以函數(shù)的形式調(diào)用時(shí),this是window;
2.當(dāng)以方法的形式調(diào)用時(shí),誰調(diào)用方法 this就是誰;
3.當(dāng)以構(gòu)造函數(shù)的形式調(diào)用時(shí),this就是新創(chuàng)建的那個(gè)對(duì)象。
2.5. 函數(shù)對(duì)象原型的方法
1.Function.prototype.call():使用一個(gè)指定的 this 值調(diào)用一個(gè)函數(shù)(簡單理解為調(diào)用函數(shù)的方式,但是它可以改變函數(shù)的 this 指向)
2.Function.prototype.apply() 方法調(diào)用一個(gè)函數(shù)。簡單理解為調(diào)用函數(shù)的方式,但是它可以改變函數(shù)的 this 指向
3. Function.prototype.bind() 方法不會(huì)調(diào)用函數(shù),但是能改變函數(shù)內(nèi)部this 指向,返回的是原函數(shù)改變this之后產(chǎn)生的新函數(shù)
// 1.call方法
var o = {
name:"張美麗"
}
function fn(a,b) {
console.log(this);
console.log(a + b);
}
fn(1,3) //此時(shí)的this指向的是window 運(yùn)行結(jié)果:3
fn.call(o,1,2) //此時(shí)的this指向的是對(duì)象o 運(yùn)行結(jié)果:輸出對(duì)象o和3
// 2.apply方法
var o = {
name:'andy'
}
function fn1(a,b) {
console.log(this);
console.log(a + b)
}
fn() //此時(shí)的this指向的是window 運(yùn)行結(jié)果:3
fn.apply(o,[1,2]) //此時(shí)的this指向的對(duì)象o,運(yùn)行結(jié)果:輸出對(duì)象o和3
// 3.bind方法
var o = {
name:'andy'
}
function fn1(a,b) {
console.log(this);
console.log(a + b)
}
var f = fn.bind(o,1,2) //此處的f是bind返回的新函數(shù)
f() //調(diào)用新函數(shù) this指向的是對(duì)象o
2.6. 構(gòu)造函數(shù)的繼承
1.先定義一個(gè)父構(gòu)造函數(shù)
2.再定義一個(gè)子構(gòu)造函數(shù)
3.子構(gòu)造函數(shù)繼承父構(gòu)造函數(shù)的屬性(使用call方法)
// 1.父構(gòu)造函數(shù)
function Father(uname) {
// this 指向父構(gòu)造函數(shù)的對(duì)象實(shí)例
this.uname = uname;
}
// 2.子構(gòu)造函數(shù)
function Son(uname, age) {
// this指向子構(gòu)造函數(shù)的對(duì)象實(shí)例
// 3.使用call方式實(shí)現(xiàn)子繼承父的屬性
Father.call(this.uname);
this.age = age;
}
var son = new Son('王帥帥', 18);
console.log(son); // Son {age:18}
2.7. 原型對(duì)象prototype方法繼承
// 1.父構(gòu)造函數(shù)
function Father(uname, age) {
// this 指向父構(gòu)造函數(shù)的對(duì)象實(shí)例
this.uname = uname;
this.age = age;
}
Father.prototype.money = function() {
console.log(100000);
};
// 2.子構(gòu)造函數(shù)
function Son(uname, age, score) {
// this 指向子構(gòu)造函數(shù)的對(duì)象實(shí)例
Father.call(this, uname, age);
this.score = score;
}
// Son.prototype = Father.prototype; 這樣直接賦值會(huì)有問題,如果修改了子原型對(duì)象,父原型對(duì)象也會(huì)跟著一起變化
Son.prototype = new Father();
// 如果利用對(duì)象的形式修改了原型對(duì)象,別忘了利用constructor 指回原來的構(gòu)造函數(shù)
Son.prototype.constructor = Son;
// 這個(gè)是子構(gòu)造函數(shù)專門的方法
Son.prototype.exam = function() {
console.log('孩子要考試');
}
var son = new Son('王帥哥',18,100);
console.log(son); //存在一個(gè)Father原型對(duì)象,在Father里面有age,uname,exam;money在fahter外層的原型對(duì)象里面。
2.8. Object.create實(shí)現(xiàn)類式繼承
// 父類
function Shape() {
this.x = 0;
this.y = 0;
}
// 子類
function Rectangle() {
Shape.call(this); // 調(diào)用父類的構(gòu)造函數(shù)
}
// 將父類的原型對(duì)象,作為子類原型的原型對(duì)象。子類續(xù)承父類
Rectangle.prototype = Object.create(Shape.prototype);
// 設(shè)置子類原型的構(gòu)造函數(shù)
Rectangle.prototype.constructor = Rectangle;
var r = new Rectangle();
r instanceof Rectangle; // true
r instanceof Shape; // true
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JavaScript中Reduce10個(gè)常用場景技巧
這篇文章主要為大家介紹了JavaScript中Reduce10個(gè)常用場景和技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
js面向?qū)ο缶幊蘋OP及函數(shù)式編程FP區(qū)別
這篇文章主要為大家介紹了js面向?qū)ο缶幊蘋OP及函數(shù)式編程FP的區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
JavaScript實(shí)現(xiàn)余額數(shù)字滾動(dòng)效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)余額數(shù)字滾動(dòng)效果,將傳入的帶滾動(dòng)的n位數(shù)字拆分成每一個(gè)要滾動(dòng)的數(shù),然后動(dòng)態(tài)的創(chuàng)建裝著滾動(dòng)到每一位相應(yīng)數(shù)字的容器,然后放入傳入的目標(biāo)容器中,更多詳細(xì)內(nèi)容,一起進(jìn)入下面文章學(xué)習(xí)吧2021-12-12
Three.js實(shí)現(xiàn)雪糕地球的使用示例詳解
這篇文章主要為大家介紹了Three.js實(shí)現(xiàn)雪糕地球的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
LoadRunner調(diào)用JS加密后登錄實(shí)現(xiàn)
這篇文章主要為大家介紹了LoadRunner調(diào)用JS加密后登錄實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06

