JavaScript学习笔记--JS高级（尚硅谷）

已于 2022-05-13 18:51:28 修改
阅读量1.1k 收藏 3
点赞数 1
文章标签： javascript 开发语言 前端
于 2022-01-31 02:40:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wykkk1/article/details/122757507
版权

一、基础总结深入

1.1 数据类型

1.基本（值）类型

  1. String：任意字符串
  2. Number：任意的数字
  3. boolean：true/false
  4. undefined：undefined
  5. null:null

2.对象（引用）类型

  1. Object:任意对象
  2. Function：一种特别的对象（可以执行）
  3. Array：一种特别的对象（数值下标属性，内部数据是有序的）

3.判断数据类型方式

1.typeof   

 返回数据类型的字符串表达                                                                                                             

 * 可以判断：undefined / 数值 / 字符串 / 布尔值 / function                                                               

 * 不能判断：null 与 object   object 与 array   

2.instanceof（哪个类型的实例） ：判断对象的具体类型（一个函数/数组等等）

3.  === / ==                                                                                                                                        

 * 可以判断：undefined  /  null 

typeof 返回数据类型的字符串表达

<script>
        var a;
        console.log(a,typeof a,typeof a === 'undefined',a === undefined); //输出结果：undefined  'undefined' true true
        a = 3;
        console.log(typeof a === 'number'); //true
        a = 'abcdefg';
        console.log(typeof a === 'string'); //true
        a = true;
        console.log(typeof a === 'boolean'); //true
        a = null;
        console.log(typeof a );  //object
    </script>

 对象

<body>
    <script>
        //typeof判断数值类型
        var a;
        console.log(a,typeof a,typeof a === 'undefined',a === undefined); //输出结果：undefined  'undefined' true true
        a = 3;
        console.log(typeof a === 'number'); //true
        a = 'abcdefg';
        console.log(typeof a === 'string'); //true
        a = true;
        console.log(typeof a === 'boolean'); //true
        a = null;
        console.log(typeof a );  //object

        //2.对象
        var b1 = {
            b2:[1,'abc',console.log],
            b3:function(){
                return 'xfzhang';
            }
        }
        console.log(b1 instanceof Object,b1 instanceof Array); //true  false
        console.log(b1.b2 instanceof Array,b1.b2 instanceof Object);//true  true
        console.log(b1.b3 instanceof Function,b1.b3 instanceof Object);//true true
        console.log(typeof b1.b2);//'object'

        console.log(typeof b1.b3 === Function);//true

        console.log(typeof b1.b2[2]);//function
        b1.b2[2](4);
        console.log(b1.b3()());
    </script>

实例对象 

 <script>
        //实例：实例对象
        //类型：类型对象
        function Person(name,age){ //构造函数类型
            this.name = name;
            this.age = age;
        }
        var p = new Person('Tom',12);//根据类型创建的实例对象
        //Person('Jack',12);//不能这样子调用
    </script>

⭐1.undefined和null的区别

答： undefined代表定义了未赋值

        null代表定义并赋值了，只是值为null。

 //1.undefined 和 null的区别
        var a;
        console.log(a);  //undefined
        a = null;
        console.log(a);  //null

 ⭐2.什么时候给变量赋值为null呢

答：

  1. 初始赋值，表明变量要赋值为对象
  2. 结束前，让对象成为垃圾对象（被垃圾回收站回收）
//起始
var b = null; //初始赋值为null，表明将要赋值为对象
//确定对象赋值
b = ['aaa',12];
//最后   释放数组所占用的内存
b = null;    //让b指向的对象成为垃圾对象（被垃圾回收器（在浏览器内核中）回收）

 ⭐3.严格区分变量类型与数据类型

答：

数据的类型：

  • 基本类型 
  • 引用类型

 

变量的类型（变量内存值的类型）：

  • 基本类型：保存的就是基本类型数据
  • 引用类型：保存的是地址值
 var c = function(){}  //保存的是function的地址值
 console.log(typeof c); //function

1.2 数据_变量_内存 

1.什么是数据？ 

答：存储在内存中代表特定信息的东西，本质上是0101....(二进制数据)

         数据的特点：可传递，可运算

          一切皆数据

          内存中所有操作的目标是数据

  • 算术运算
  • 逻辑运算
  • 赋值
  • 运行函数

2.什么是内存？                                                                                                                 

 答：内存条通电以后产生的可存储数据的空间（临时的）

        内存产生和死亡：内存条（电路板）==>  产生内存空间 ==> 存储空间 ==> 存储数据 ==> 处理数据 ==> 断电 ==> 内存空间和数据都消失

         一块小内存的两个数据：1.内部存储的数据  2.地址值

         内存分类：栈：存储基本数据类型（全局变量和局部变量）

                           堆：对象（对象本身在堆空间，标识这个对象的变量在栈空间）                   

3.什么是变量       

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

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

4.内存，数据，变量三者之间的关系

答：内存是用来存储数据的空间，

　　变量是内存的标识。

var obj = {name:'Tom'}

obj  --  变量（存储在栈空间中）

name：'Tom'  -- 数据（存储在堆空间中）

这个等式的意思：将数据的地址值赋值给变量。

var a = obj;

 在堆空间中开辟出一块地址a，将obj空间存储的地址值拷贝给a一份

console.log(obj.name);

 内存是根据名称来查找的，此代码的意思是根据obj查找存储的地址值，在堆空间中找到对应数据

'.'   ---- 只有当变量中存储的是地址值才能加  '.'     ，然后读内存里面的值

任何内存都有地址值，只是使用还是不使用的区别。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5qyn5rOh5p6c5aW2Tw==,size_20,color_FFFFFF,t_70,g_se,x_16

 5.关于赋值与内存的问题

问题：var a = xxx ,a 内存中保存的到底是什么？

 答：* xxx 是基本数据，保存的就是这个数据

        *  xxx是对象，保存的是对象的地址值

        *  xxx是一个变量，保存的是xxx的内存内容（可能是基本数据，也可能是地址值）

6.关于引用变量赋值的问题 

答：* 多个引用变量指向同一个对象 ，通过一个变量修改对象内部数据，另一个变量看到的是修改之后的数据。

       *两个引用变量指向同一个对象，让其中一个引用变量指向另一个对象，另一个引用变量依然指向前一个对象

<script>
        var obj1 = {name:'Tom'}
        var obj2 = obj1;
        obj2.age = 12;
        console.log(obj1.age);
        function fn(obj){   //obj形参
            obj.name = 'A';
        }
        fn(obj1);   //obj1实参
        console.log(obj2.name);//A
</script>
  var a = {age:12};
        var b = a;
        a = {name:'Bob',age:13}
        console.log(b.age,a.name,a.age);//12 Bob 13

        function fn2(obj){  
             //这里的obj传入的是实参a的地址值，但是obj在函数中重新赋值了一个地址值
             //相当于obj是一个新的对象，与a没有关系了
            obj = {age:15}
        }
        fn2(a);
        // obj在执行完之后会成为垃圾对象，因为执行完之后，函数内部的局部变量会被自动释放
        console.log(a.age);//13

7.关于数据传递问题 

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

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

8.JS引擎如何管理内存 

答：1.内存生命周期 

           * 分配小内存空间，得到它的使用权 

           * 存储数据，可以反复进行操作

           * 释放小内存空间  

       2.释放内存 

           * 局部变量： 函数执行完自动释放

           * 对象 ： 成为垃圾对象==>垃圾回收器回收

1.3 对象 

1.什么是对象？

答：* 多个数据的封装体

       * 用来保存多个数据的容器

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

2.为什么要用对象？

答：统一管理多个数据 。

3.对象的组成

答： * 属性：属性名（字符串）和属性值（任意）组成

         * 方法：一种特别的属性

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

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

       * ['属性名']：编码麻烦，能通用

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

答：1.属性名包含特殊字符：- 空格 

       2.变量名不确定 

<script type="text/javascript">
        var p = {};
        //1.给p对象添加一个属性：content-type:text/json
        // p.content-type = 'text/json';   //不能用
        p['content-type'] = 'text/json';
        console.log(p['content-type']);

        //2.变量名不确定
        var propName = 'myAge';
        var value = 18;
        // p.propName = value//不能用
        p[propName] = value;
        console.log(p[propName]);
    </script>

 1.4 函数

1.什么是函数？

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

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

2.为什么要用函数？ 

答：*  提高代码复用 

       *  便于阅读交流 

3.如何定义函数？ 

答：* 函数声明 

       * 表达式 

function fn1(){//函数声明
            console.log('fn1()');
        }
        var fn2 = function(){//表达式
            console.log(fn2);
        }

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

答： * test（）：直接调用

        * obj. test(): 通过对象调用

        * new test() : new调用

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

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

 1.5 回调函数

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

答：1.你定义的    2.你自己没有调用   3.最终它执行了 

2.常见的回调函数 

答：* DOM事件回调函数

       * 定时器回调函数

       * ajax请求回调函数（后面讲） 

       * 生命周期回调函数（后面讲）

<body>
    <button id='btn'>测试点击事件</button>
    <!-- 1.什么函数才是回调函数
    2.常见的回调函数 -->
    <script>
     document.getElementById('btn').onclick = function(){//dom事件回调函数
         alert(this.innerHTML)
     }
     //定时器
     //超时定时器（延时定时器）
     //循环定时器
     setTimeout(function(){//定时器回调函数
         alert('到点了')
     },2000)
    </script>
</body>

 1.6 IIFE

1.理解

全称：Immediately-Invoked Function Express 

2.作用 

答：* 隐藏实现 

       * 不会污染外部命名空间 

   <script>
       var fn = function(){
            console.log('....');
        }
        (function(){  //匿名函数自调用
            console.log('....');
        })()

        var a = 4;
        console.log(a);

        (function(){
            var a = 1;
            function test(){
                console.log(++a);
            }
            function test2(){

            }
            window.$ = function(){//向外暴漏一个全局函数
                return {
                    test:test
                }
            }
        })()
        $().test();//1.$是一个函数   2.$符执行后返回的是一个对象
    </script>

1.7 函数中的this 

1.this是什么？

答： * 所有函数内部都有一个变量叫this

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

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

2. 如何确定this的值？

答：* test（）：window 

       * p.test() : p

       * new test() : 新创建的对象 

       * p.call(obj）：obj 

   <script>
        //谁调用的this，this就指向谁
        function Person(color){
            console.log(this);
            this.color = color;
            this.getColor = function(){
                return this.color;
            };
            this.setColor = function(){
                this.color = color;
            };
        }
        Person("red");//this是谁？     window

        var p = new Person("yello");//this是谁？  p

        p.getColor();//this是谁？  p

        var obj = {};
        p.setColor.call(obj,"black");//this是谁？  obj

        var test = p.setColor;
        test();//this是谁？ window 

        function fun1(){
            function fun2(){
                console.log(this);
            }
            fun2();//this是谁？ window
        }
    </script>

补充：分号问题 

  1. js一条语句的后面可以不加分号 
  2. 是否加分号是编码风格问题 ，没有应不应该，只有喜不喜欢
  3. 在下面两种情况下不加分号会有问题  1.小括号开头的前一条语句  2.中方括号开头的前一条语句
  4. 解决办法：在行首加分号
  5. 强有力的例子：vue.js 

二、函数高级

 2.1 原型与原型链

 1.函数的prototype属性（图）

 * 每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）

 * 原型对象中有一个属性constructor，它指向函数对象 

2.给原型对象添加属性（一般都是方法） 

* 作用：函数的所有实例对象自动拥有原型中的属性（方法）

 

 

听到这不太能听得懂这个老师讲的课了，，还是去看pink老师接下来的教程了，以后回过头再继续看看这个老师讲的课也许会有新的收获。 

 

欧泡果奶O
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
JavaScript |（一）JavaScript简介及基本语法 | 尚硅谷JavaScript基础&实战
因为健忘，所以记点有的没的〒▽〒
07-25 606
JavaScript简介及基本知识 | 尚硅谷JavaScript基础&实战
js高级学习笔记
yifan6688的博客
11-25 202
1、全局作用域作用域链 嵌套关系的作用域串联起来形成了作用域链 相同作用域链中按着从小到大的规则查找变量 子作用域能够访问父作用域，父级作用域无法访问子级作用域（就近原则）2、 闭包3、变量提升变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问4、动态参数arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参5、剩余参数借助 ... 获取的剩余实参6、箭头函数7、解构赋值8、构造函数。
JavaScript高级 笔记
踩的坑越多，经验越多
09-16 2934
JavaScript高级 学习笔记总结
JS高级课堂笔记
木木木森林
08-24 399
原型链继 数据的特点： 可传递。var a = 3; var b = a; 可运算。var a = 3; var b = a + 2; 问题：var a = xxx;，a 内存中到底保存的是什么？ xxx是基本数据，保存的就是这个数据。 xxx是对象，保存的是对象的地址值。 xxx是一个变量，保存的xxx的内存内容(可能是基本数据，也可能是地址值)。 关于引用变量的赋值问题： 两个或多个引用变量指向同一个对象，通过一个变量修改对象内部数据，其他所有变量看到的是修改之后的数据。 两个或多个
尚硅谷JavaScript高级学习笔记
最新发布
03-07
尚硅谷JavaScript高级学习笔记
javascript高级学习笔记整理
12-04
一.js面向对象的一种实现 代码如下: [removed] function Person() { this.name = “张三”; this.age = 0; var nickName = “小三”; //类似私有变量,函数中的局部变量在函数执行完后自动销毁. this.SayHi = ...
js-ShanGuiGu：学习JavaScript尚硅谷课程的个人学习笔记
02-20
js-山桂谷学习javascript尚硅谷课程的个人学习笔记
尚硅谷web前端学习笔记javaScript基础全部 143页 40207字
01-28
尚硅谷web前端学习笔记javaScript基础全部 143页 40207字
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。JavaScript不是Java的子集，两者之间没有直接关联。JS起初名为LiveScript，但在...
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
01-08
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20 单位数字：10个（0-9） 2.二进制（计算机底层的进制）： 特点：满2进1 计数：0 1 10 11 100 101 110 111 单位数字：2个（0-1） 扩展：所有数据在计算机底层都会以二进制的形式保存。可以将内存想象成一个含有多个小格子的容器，每一个小格子中可以存储一个0或一个1，这一个小格
JavaScript高级整理
08-24
谷粒学院学习笔记，内容包括 原型与原型链、执行上下文、执行上下文栈、变量提升、函数提升、作用域、作用域链、闭包、对象的多种创建模式、对象的继承模式、JavaScript事件循环机制等。
尚硅谷-前端培训视频
01-07
尚硅谷前端开发全套视频，H5,JS,jquery,React，自动化构建工具。
经典尚硅谷JavaScript视频
06-15
精心收藏 上百本经典前端电子书 总有基本合适你的 节省大家时间
【前端学习之路】 JavaScript高级部分 尚硅谷学习笔记
a123456_9的博客
07-12 2714
用来保存多个数据的容器便于统一管理多个数据属性：属性名（字符串）和属性值（任意）组成方法：一种特别的属性（属性值是函数）实现特定功能的n条语句的封装体提高代码复用性便于阅读交流①自己定义的 ②不用手动调 ③最终执行的 满足这三点的都是回调函数常见的回调函数：a.dom事件回调函数b.定时器回调函数c.ajax请求回调函数 d.生命周期回调函数作用：①隐藏实现 ②不会污染外部（全局）命名空间 ③用来编写JS模块每个函数都有一个prototype属性（显示原型），这个属性默认指向一个Objec
尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
m0_62516225的博客
10-29 873
尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
JavaScript(基础、高级)笔记汇总表【尚硅谷JavaScript全套教程完整版】
热门推荐
upward
09-16 2万+
尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)
webkit和javascript V8的关系
lanxinyuchs的专栏
04-08 207
页面的绘制（绘制，就是把一个HTML文件变成一个活灵活现的页面展示的过程...），只有一半轮子是Chrome自己做的，还有一部分来自于WebKit，这个Apple打造的Web渲染器。之所以说是一半轮子来源于WebKit，是因为WebKit本身包含两部分主要内容，一部分是做Html渲染的，另一部分是做JavaScript解析的。在Chrome中，只有Html的渲染采用了WebKit的代码，而在J...
尚硅谷_JS高级 笔记
earthOLtainanwan的博客
07-31 1980
目录
javascript学习笔记--查看html元素和改变html的内容
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值