JavaScript函数

luckyyulin 发布于2019-04-23 13:18 / 3052人阅读

摘要：高级高级一函数高级一函数高级函数回调函数回调回调的函数逻辑函数函数回调函数回调的本质在一个函数中调用函数，当满足一定条件，调用参数函数回调函数回调函数作为调用函数的参数传入回调函数通过参数将调用还是内部数据传出闭包闭包闭包目的不允许提升变量

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函数对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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