前端学习JS进阶第二天（P4--P14）

xiaoxiaosu233

已于 2022-02-18 18:23:09 修改

阅读量311

点赞数

分类专栏：前端学习文章标签：前端 javascript 学习

于 2022-02-18 12:01:23 首次发布

本文链接：https://blog.csdn.net/xiaoxiaosu233/article/details/122998426

版权

前端学习专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、内存，数据，变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    1.什么是数据
    存储在内存中，代表特定信息的东西，本质上是0101
    数据的特点：可传递，可运算
    2.什么是内存
    内存条通电以后产生的可存储数据的空间（临时的）
    -内存分类
    栈：全局对象，局部对象
    堆：对象
    3.什么是变量
    可变化的值，由变量名和变量值组成
    每个变量都对应一个内存空间，变量名用来查找对应的内存，变量值就是内存中保存的数据
    4.内存，数据，变量三者之间的关系
    内存用来存储数据的空间
    变量是内存的标识
    5.var a = xxx a内存中保存的是什么
    xxx是基本数据，保存的就是这个数据
    xxx是对象，保存的是地址值
    xxx是一个变量，保存的xxx的内存内容（基本数据/地址值）
    6.2个引用变量指向同一个对象，通过一个变量修改对象内部数据，另一个变量看到的是修改之后的数据






-->
    <script>


let obj1 = {name:"tom"};
let obj2 = obj1;
obj2.age = 12;
console.log(obj1.age);
let a = {age:12};
let b=a;
a={name:"bob",age:13};
b.age = 14;
console.log(b.age,a.name,a.age)

function fn2(obj) {
    obj = {age:15}

}
fn2(a)
console.log(a.age)


    </script>
</head>
<body>

</body>
</html>

二、对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
1.什么是对象
多个数据的封装体
用来保存数据的容器
一个对象代表现实世界中一个事物
2.为什么要用对象
统一管理多个对象
3.对象的组成
属性
方法
4.如何访问对象内部数据
.属性名
["属性名"]:编码麻烦但是通用 --5.属性名包含特殊字符：- 空格/属性名不确定

-->
    <script>
        let p ={
            name:"tom",
            age:12,
            setName:function (name) {
                this.name = name
            },
            setAge:function (age) {
                this.age = age
            }
        };
        p.setName("bob");
        p["setAge"](23);
        console.log(p.name,p["age"]);
        
        let q = {};
        //给q添加属性
        q["content-type"]="text/json";
        
    </script>
</head>
<body>

</body>
</html>

三、函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
   1.什么是函数：实现特定功能的n条语句的封装体，只有函数可以执行，其他类型不可以执行
   2.为什么用函数：提高代码复用
   3.如何定义函数:函数声明和表达式
   4.如何调用执行函数：直接调用，new调用，call/apply临时让test成为obj的方法临时调用
   5.回调函数：你定义的，你没有调，最终他执行了

   -->


    <script>
        function shouInfo(age) {
            if(age<18){
                console.log("未成年")
            }
            else if (age>60){
                console.log("算了吧")
            }
            else{
                console.log("刚好")
            }
        }
        shouInfo(17)
        shouInfo(20)
        shouInfo(65)


        function fun1() {//函数声明

        }
        let fun2=function () {//表达式

        }
    </script>


</head>
<body>
    <button id="btn">点击</button>


    <script>
        document.getElementById("btn").onclick = function () {//dom事件回调函数
            alert(this.innerHTML)
        }

        //定时器
        //超时定时器
        setTimeout(function () {//定时器回调函数
            alert("到点了")
        },2000)


        //ajax请求回调函数，生命周期回调函数
    </script>
</body>
</html>

四、立即执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    

Immediately-Invoked Function Expression立即执行函数表达式

函数后加括号可以直接执行，不产生全局变量，自动释放，隐藏实现，不会污染外部命名空间
-->


    <script>
        (function () {//匿名函数自调用
            console.log("立即执行")
        }) ()
        
        
    </script>
    
    
</head>
<body>

</body>
</html>

五、函数中的this

1.this是什么：

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

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

③他的值是调用函数的当前对象

2.如何确定this的值

test（）window

p.test（）p

new test（）新创建的对象

p.call(obj) obj

六、关于语句分号的问题

xiaoxiaosu233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习JS进阶第二天（P4--P14）

一、内存，数据，变量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 1.什么是数据存储在内存中，代表特定信息的东西，本质上是0101 数据的特点：可传递，可运算 2.什么是内存内存条通电以后产生的可存储数据的空间（临时的）
复制链接

扫一扫