JavaScript函數

luckyyulin 發布于2019-04-23 13:18 / 3045人閱讀

摘要：高級高級一函數高級一函數高級函數回調函數回調回調的函數邏輯函數函數回調函數回調的本質在一個函數中調用函數，當滿足一定條件，調用參數函數回調函數回調函數作為調用函數的參數傳入回調函數通過參數將調用還是內部數據傳出閉包閉包閉包目的不允許提升變量

JS高級

一、函數高級

1、函數回調

// 回調的函數
function callback(data) {}
// 邏輯函數
function func(callback) {
    // 函數回調
    if (callback) callback(data);
}

// 函數回調的本質：在一個函數中(調用函數)，當滿足一定條件，調用參數函數(回調函數)
// 回調函數作為調用函數的參數傳入
// 回調函數通過參數將調用還是內部數據傳出

2、閉包

function outer() {
    var data = {}
    function inner() {
        return data;
    }
    return inner;
}

// 閉包目的：不允許提升變量作用域時，該函數的局部變量需要被其他函數使用
// 閉包本質：函數的嵌套，內層函數稱之為閉包
// 閉包的解決案例：①影響局部變量的生命周期，持久化局部變量；②解決變量污染

二、循環綁定

.html文件

    列表項
    列表項
    列表項

.js文件
var lis = document.querySelector("li");
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        // 打印列表項的索引
        console.log(i);
    }
}
// 變量污染
// 獲取局部作用域解決
// 閉包解決
// 對象屬性解決

三、面向對象JS

1、屬性與方法

var obj = {}; | var obj = new Object();
// 屬性
obj.prop = "";
// 方法
obj.func = function () {}
// 刪除屬性與方法
delete obj.prop
delete obj.func

2、類字典結構使用

結構

var dict = {name: "zero", age: 18}

拓展

var dict = {"my-name": "zero", fn: function () {}, fun () {}}

使用

dict.name | dict["my-name"] | dict.fn()

3、構造函數（ES5）

function People(name, age) {
    this.name = name;
    this.age = age;
    this.eat = function () {
        return "eat";
    }
}

4、繼承（ES5）

// 父級
function Sup(name) {
    this.name = name;
    this.fn = function () {
        console.log("fn class");
    }
}
// 原型
console.log(Sup.prototype);
console.log(sup.__proto__);
// 子級
function Sub(name) {
    // 繼承屬性
    Sup.call(this, name);
}
// 繼承方法
Sub.prototype = new Sup;
// 創建子級對象
var sub = new Sub("subClass");
// 使用屬性
console.log(sub.name);
// 使用方法
sub.fn();

// 指向自身構造函數
Sub.prototype.constructor = Sub;

5、類及繼承（ES6）

// 父類
class People {
    // 構造器
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    // 實例方法
    eat () {
        console.log("吃吃吃");
    }
    // 類方法
    static create () {
        console.log("誕生");
    }
}
// 子類
class Student extends People {
    constructor (name, age) {
        // super關鍵詞
        super(name, age)
    }
}

四、定時器

setInterval
setTimeout

GPU云服務器云服務器 javascript 函數 javascript函數 JavaScript函數編程 javascript函數對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1690.html

JavaScript專題系列文章

摘要：專題系列共計篇，主要研究日常開發中一些功能點的實現，比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等，特點是研究專題之函數組合專題系列第十六篇，講解函數組合，并且使用柯里化和函數組合實現模式需求我們需要寫一個函數，輸入，返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇，講解如何從零實現一個 jQuery 的 ext...

Maxiye 2019-08-21 17:57 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
10分鐘了解Javascript-天碼營

摘要：然后將構造函數的原型設為，便實現了對象繼承。首先，我們定義一個構造函數，并在其中定義一個局部變量。這里的是局部變量，其作用域仍然存在是閉包現象，而非對象屬性。 Javascript是動態的，弱類型的，解釋執行的程序設計語言。 Javascript極其靈活，支持多種程序設計范式：面向對象、指令式、函數式。JavaSCript最初被用于瀏覽器腳本，現在已經是所有主流瀏覽器的默認腳本語言。瀏...

trigkit4 2019-08-21 13:33 評論0 收藏0
學習React之前你需要知道的的JavaScript基礎知識

摘要：和類在開始時遇到類組件，只是需要有關類的基礎。畢竟，中的條件呈現僅再次顯示大多數是而不是特定的任何內容。在我的研討會期間，更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內置函數（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

bitkylin 2019-08-02 11:01 評論0 收藏0