JavaScript — 对象、回调函数、IIFE、函数中的this

最新推荐文章于 2024-06-16 18:09:06 发布

吃不到棒棒糖的小熊

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量414

点赞数 2

分类专栏： JavaScript 文章标签： javascript linq p2p 前端开发语言

本文链接：https://blog.csdn.net/m0_59897687/article/details/123029921

版权

JavaScript 专栏收录该内容

30 篇文章 4 订阅

订阅专栏

一、对象

1.什么是对象？

多个数据的封装体

用来保存多个数据的容器

一个对象代表现实世界中的一个事物

2.为什么要用对象？

统一管理多个数据

3.对象的组成

属性：属性名（字符串）和属性值（任意类型）组成

方法：一种特别的属性（属性值是函数）

4.如何访问对象内部数据

.属性名 ：编码简单，有时不能用

["属性名"]：编码麻烦，能通用。

    let p = {
        name:"Tom",
        age:12,
        setName:function(name){
            this.name = name;
        },
        setAge:function(age){
            this.age = age
        }
    }
    p['setName']("Bob")
    console.log(p.name);  //Bob
    p["setAge"](21)
    console.log(p["age"]);   //21

什么时候需要使用["属性名"]的方式？

1.当属性名包含特殊字符，比如：-、空格等时

//p.content-type = 'text/json'//不能用
p['content-type'] = "text/json"

2.在变量名不确定时

//p.propName = value    //不能用
p['propName'] = value

二、函数

1.什么是函数？

实现特定功能的n条语句的封装体

只有函数是可以执行的，其他类型的数据不能执行

2.为什么要用函数？

提高代码复用

便于阅读交流

3.如何定义函数？

构造函数

函数声明

表达式

4.如何调用（执行）函数？

test()：直接调用

obj.test()：通过对象调用

new test()：new 调用

test.call/apply(obj)：临时让test成为obj的方法进行调用

    let obj = {}
    function fn(){
        this.age = 12
    }
    fn.call(obj)    //可以让一个函数成为指定任意对象的方法进行调用
    console.log(obj.age);   //12

三、回调函数

1.什么函数才是回调函数？

1.自定义的

2.没有调用

3.最终它执行了

2.常见的回调函数？

DOM事件回调函数（与用户交互）
定时器回调函数
AJAX请求回调函数（与后台交互）
生命周期回调函数

<body>
    <button id="btn">测试点击事件</button>
</body>
<script>
    document.getElementById("btn").onclick = function(){//DOM事件回调函数
        alert(this.innerHTML)
    }
    //定时器
    setTimeout(function(){//定时器回调函数
        alert("到点了")
    },2000)
</script>

四、IIFE

1.理解

全称：Immediately-Invoked Function Expression即调函数表达式

2.作用

隐藏实现

不会污染外部（全局）命名空间

用它来编写JS模块

    (function(){    //匿名函数自调用
        console.log("......");
    })()

    ;(function(){
        let a = 1;
        function test(){
            console.log(++a);
        }
        window.$ = function(){  //向外暴露一个全局函数
            return {
                test:test
            }
        }
    })()
    $().test()  //1.$是一个函数 2.$执行后返回的是一个对象

五、函数中的this

1.this是什么？

任何函数本质上都是通过某个对象来调用，如果没有直接指定就是window

所有函数内部都有一个变量this

它的值是调用函数的当前对象

2.如何确定this的值？

test(): window

p.test(): p

new test(): 新创建的对象

p.call(obj): obj

    function Person(color){
        console.log(this);
        this.color = color;
        this.getColor = function(){
            console.log(this);
            return this.color
        }
        this.setColor = function(color){
            console.log(this);
            this.color = color
        }
    }

    Person("red")   //this是window

    let p = new Person("yellow")    //this是p

    p.getColor();   //this是p

    let obj = {}
    p.setColor.call(obj,"black")    //this是obj

    let test = p.getColor;
    test()  //this是window

    function fn1(){
        function fn2(){
            console.log(this);
        }
        fn2()   //this是window
    }

关于分号的问题：

1.JS一条语句的后面可以不加分号

2.是否加分号是编码风格问题，没有应不应该，只有自己喜不喜欢

3.在下面两种情况下不加分号会有问题：

*小括号开头的前一条语句

*中方括号开头的前一条语句

4.解决办法：在行首加分号

5.强有力的例子：vue.js库

吃不到棒棒糖的小熊

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript — 对象、回调函数、IIFE、函数中的this

目录一、对象1.什么是对象？2.为什么要用对象？3.对象的组成4.如何访问对象内部数据二、函数1.什么是函数？2.为什么要用函数？3.如何定义函数？4.如何调用（执行）函数？三、回调函数1.什么函数才是回调函数？2.常见的回调函数？四、IIFE1.理解2.作用五、函数中的this1.this是什么？2.如何确定this的值？关于分号的问题：一、对象1.什么是对象？多个数据的封装体 ...
复制链接

扫一扫