JavaScript查漏补缺

最新推荐文章于 2022-12-21 15:27:40 发布

Sejinda

最新推荐文章于 2022-12-21 15:27:40 发布

阅读量316

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_57586976/article/details/127710590

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 在js调用函数，传递变量参数时，是值传递还是引用传递

2. 什么时候必须使用 ['属性名'] 的方式

3. var a = x,a内存中到底保存的是什么

数据类型

数据类型的3种判断方式

1、typeof

typeof返回数据类型的字符串表达,可以用来判断 undefined / 数值 / 字符串 / 布尔值 / function

typeof不能判断的情况

null 与 object

array 与 object

2、instanceof

判断对象的具体类型

3、===

判断两个值是否全等，若两边的值类型不同，则直接返回false

undefined与null的区别

将一个变量声明了，但是没有赋值，这个变量的值就是undefined,

将一个变量定义并且赋值为null，值是null

例如：

什么时候给变量赋值为null

1、初始赋值，表明将要赋值给一个对象

2、结束前，将这个对象的引用指向null，让该对象成为垃圾对象（被垃圾回收器回收）

数据变量与内存

1、什么是数据

数据(data)是事实或观察的结果,是对客观事物的逻辑归纳,是用于表示客观事物的未经加工的原始素材。

例如进行各种运算，就需要操作数据

2、什么是内存

物理存储

内存条通电后产生的可存储数据的临时存储空间

内存的产生与死亡：内存条（插在电路板上）---通电---产生内存空间---存储数据（RAM）---处理数据（CPU）---断电---内存空间和数据都消失（栈上的数据存放在随机存储器上）

逻辑存储

栈：全局变量，局部变量

堆：对象

一块小内存存储两个数据

内部存储的数据

地址值

3、什么是变量

可变化的量，由变量名和变量值组成

每个变量都对应一段内存，变量名用来查找对应的内存，变量值就是内存中保存的数据

问题

1. 在js调用函数，传递变量参数时，是值传递还是引用传递

理解1：都是值（基本值/地址值）传递

理解2：可能是值传递，也可能是引用传递（地址值）

例子：

<script>
        let a = 3
        function fn(a){
            a = a+1
        }
        fn(a)
        console.log(a)

        function fn2(obj){
            console.log(obj.name);
        }
        let obj = {name:'tom'}
        fn2(obj)
    </script>

2. 什么时候必须使用 ['属性名'] 的方式

1）属性名包含特殊字符：- 空格等

2）变量名不确定

例子

<script>
        let a = 3
        let p = {
            [0123]: 'demo1',
            ['-xxx']:'xxx',
            "-demo2": 'demo2',
            123: 'demo3',
            "value": a
        }
        //1.属性名包含特殊字符
        //给p添加属性 content-type:text/json
        p['content-type'] = 'text / json'

        //2.变量名不确定
        let age = 'myage'
        let val = 18
        p[age] = val
        
        console.log(p);
    </script>

3. var a = x,a内存中到底保存的是什么

有三种情况

1）若 x 是一个基本数据，a中保存的就是这个基本数据，(基本数据是null，保存的是对null的引用)

2）若 x 是一个对象，a中保存的是这个对象的引用

3）若 x 是一个变量，a中保存的也是一个地址值，指向该变量对应的那一段内存

3. 关于引用变量赋值问题

2个引用变量指向同一个对象，通过一个引用变量修改为对象内部数据，另一个引用变量也看得见

2个引用变量指向同一个对象，让一个引用变量指向另一个对象，另一个变量还是指向原来的对象

函数

1、什么是函数

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

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

2、为什么要用函数

提高代码复用，便于阅读交流

3、如何定义函数

函数声明，函数表达式

4、如何调用(执行)函数

直接调用 test()

调用对象的方法 obj.test()

匿名调用 new test()

通过call(),apply()方法调用 test.call(obj2)

回调函数

回调函数详解

什么函数才是回调函数

作为参数传递给另一个函数的函数

回调函数只是定义，并不调用，在某个时刻被触发

常见的回调函数

1、dom事件回调函数

<body>
    <input type="text" value="1">
    <button id="btn">+1</button>
    <script>
       let btn = document.querySelector("#btn")
       let ipt = document.querySelector('input')
       btn.addEventListener('click',function(){
            ipt.value++
       })
    </script>
</body>

2、定时器回调函数

<body>
    <input type="text" value="1">
    <script>
       let ipt = document.querySelector('input')
       let timer = setInterval(()=>{
            ipt.value == 10?(clearInterval(timer)):(ipt.value++)
        },3000)
       
    </script>
</body>

3、ajax请求回调

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4){
          if(xhr.status >=200 && xhr.status<300){
               result.innerHTML = xhr.response;
          }
    }    
  }

IIFE

全称：Immediately-Invoked Function Expression

作用：

1、隐藏实现

2、不会污染全局命名空间

3、编码JS模块

例子：

(function(a,b){  		
    console.log("a = "+a);
    console.log("b = "+b);
})(123,456);			

(function (a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
}(123, 456));

编码风格

1、js一条语句的后面分号可加可不加

2、是否加分号看个人习惯偏好

3、JavaScript 有着自动分号插入的机制(Automatic Semicolon Insertion)，简称 ASI

4、在以 “(“、”[“ 、”/“、”+”、”-“ 开头的语句前面都加上一个分号

5、还是加上吧

6、知乎解答

函数中的this

demo:

<body>
    <script>
       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");

       var p = new Person('yellow');

       p.getColor();

       var obj = {};
       p.setColor.call(obj,'black');

       var test = p.setColor;
       test();

       function fun1(){
        function fun2(){
            console.log(this);
        }

        fun2();
       }

       fun1();
    </script>
</body>