JS高级01

最新推荐文章于 2023-05-28 13:36:51 发布
最新推荐文章于 2023-05-28 13:36:51 发布
阅读量307 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JS 学习笔记 文章标签： javascript 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CCAHSC/article/details/123284467
本文深入探讨JavaScript中的预解析机制，详细解释了预解析如何提升变量和函数声明，以及代码段的独立执行特性。同时，介绍了执行上下文的概念，包括全局和局部执行上下文，以及作用域链的工作原理。此外，还讨论了变量的声明（var、let、const）、闭包、函数作为一等公民的角色，以及IIFE（立即调用的函数表达式）和高阶函数的应用。最后，涉及this的指向规则以及面向对象编程的基础知识，如原型链、继承和对象的创建方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

JS高级

预解析内容

  • 代码段是指一个script标签就是一个代码段。JS代码在执行时，是一个代码段一个代码段执行。
  • 代码段是相互独立的上面的代码段报错了，不会影响下面的代码段
  • 可以在下面代码段中使用上面代码段中的数据！
    <script>
        var a = '我是第一个代码段中的a';
        console.log(b);//b is not defined
        //在上面的代码段里不能使用下面定义的数据
    </script>

    <script>
        var b = '我是第二个代码段中的b';
        console.log(a);//打印'我是第一个代码段中的a'
        //在下面的代码段里能使用上面定义的数据
    </script>

什么是预解析

  • 浏览器在执行JS代码的时候会分成两个部分操作：预解析和逐行执行代码
  • 也就是浏览器不会直接执行代码，而是加工处理后再执行
  • 这个加工处理的过程就是预解析

预解析会做什么？

  • 预解析期间会提升变量，在代码段中加var 的变量 和 function声明的函数会提升到代码段的最前面，注意：变量提升只提升声明，函数提升的是函数整体！
  • 除了代码段中的全局数据会提升外，函数体内部的局部变量也会提升，注意：局部变量在函数内部提升只提升声明。
  • 结论：预解析会变量提升，变量只提升声明，函数提升整体！
  • 注意：提升的同名变量名和函数名，函数会覆盖变量，函数在JS中是一等公民优先级高
  • 注意：当函数名重复声明并赋值的话 只会提升第一个

预解析练习题

  • 题目1
    <script>
        //预解析提升：
        //var a; fn(){};
        console.log(a);//undefined
        var a = 110;   //给a 赋值为110
        console.log(a);//110

        fn();          //调用fn函数 打印 我是一个fn函数
        function fn(){
            console.log('我是一个fn函数');
        }
    </script>
  • 题目2
    <script>
        //预解析提升：
        //var g;
        g();           //g提升后值为 undefined 所以结果为g is not a function
        var g = function(){ //g 是一个变量 不是函数
            console.log('g函数执行了..');
        }
    </script>
  • 题目3
    <script>
        //预解析提升：
        //var i;
        console.log(i);//undefined
        for(var i = 0; i < 10; i++){}//循环给i赋值
        console.log(i);//i = 10
    </script>
  • 题目4
    <script>
        //预解析提升：
        //var a; fn(){};
        //var b; var a; var c;
        var a = 666;       //给全局变量a赋值 由undefined变为666
        fn();              //调用函数
        function fn() {
            var b = 777;   //给局部变量b赋值 由undefined变为777
            console.log(a);//打印 und
            console.log(b);//打印 777
            console.log(c);//打印 und
            var a = 888;
            var c = 999;
        }
    </script>
  • 题目5
    <script>
        //预解析提升：
        //var value; function value(){}
        console.log(value); //value由und 变为value函数体
        var value = 123;    //value由函数体变为123
        function value() {
            console.log('我是value函数...');
        }
        console.log(value); //打印123
        //结论：提升的同名变量名和函数名，函数会覆盖变量，函数在JS中是一等公民优先级高
    </script>
  • 题目6
    <script>
    //预解析提升：
        console.log(a);//a 没有加var 不提升 报错 a is not defined
        a = 666;
        console.log(a);//上面代码报错下面代码不执行
    </script>
  • 题目7
    <script>
    //预解析提升：
    //fn(){};
        function fn(){
            console.log(a);//找a 没有a  a is not defined
            a = 666;       //代码是从上到下执行的 没有运行到这一行 如果运行到这一行的话 会在VO中存一个 a = 666
            console.log(a);//不执行
        }
        fn();
        console.log(a);   //不执行
    </script>
  • 题目8
    <script>
    //预解析提升：
    //fn(){}
        function fn(){
            a = 110;
        }
        console.log(a); //函数没有执行 找不到a a is not defined
    </script>
  • 题目9
    <script>
    //预解析提升：
    //gn(){}
    //var k;
        gn();           
        function gn(){
            var k = 123;
            console.log(k); //123
        }
        console.log(k);     //k is not defined
    </script>

执行上下文

  • 全局执行上下文和局部执行上下文
  • 当全局代码执行时，就会产生一个全局的执行上下文，EC(G);
  • 当函数代码执行时，就会产生一个局部的执行上下文，EC(Fn)。只要调用一个函数，就会产生一个局部执行上下文。调用100个函数，就会产生100个执行上下文。
  • 在JS代码在执行时，肯定会先执行全局代码，就会产生ECG，这个ECG就要入栈。当我们调用一个函数，就会产生一个EC，这个EC就要入栈，当函数调用完毕后，EC就要出栈，又进入ECG，当全局代码执行完毕后，ECG也要出栈。
    <script>
        /*
            在JS代码在执行的时候会先执行全局代码，执行全局代码就会产生一个ECG，这个ECG就要入栈
            当我们调用函数的时候就会产生一个EC这个EC就要入栈，当函数调用完毕，就会出栈，又进入ECG
            当全局代码执行完毕后，ECG也要出栈。
        */
        /*
             ECG在执行代码之前会预解析然后把全局定义的变量函数放入VO(GO)，GO中包括了内置的方法，window，以及自己声明的全局数据
             作用域链：ECG的作用域链就是VO本身
             
             ECF在执行代码解析前会创建一个AO对象AO中包含形参，arguments，函数定义和指向函数对象，定义的变量
             作用域链：ECF作用域链由AO和父级VO组成，查找数据会一层一层查找
        */
         /* 
            在函数内部不加var定义的变量为全局变量，全局变量只会保存在VO中
        */
    </script>

    <!-- <script>
        //原题
        var n = 110;
        console.log(n);
        console.log(window.n);
        m = 220;
        console.log(m);
        console.log(x);
    </script>

    <script>
        //分析
        //var n;
        //n = 110;
        var n = 110;
        console.log(n);//110
        console.log(window.n);//全局代码会放在GO中 GO就是window 所以n=110
        m = 220;
        console.log(m);//不加var的全局代码不会提升。m=220
        console.log(x);//x没有声明，x is not defined
    </script> -->



    <!-- <script>
        //原题
        var a = 1;
        var b = 'hello';
        function fn() {
            console.log('fn...');
        }
        var arr = ['a', 'b', 'c'];
        var obj = { name: 'wc', age: 100 }
    </script>

    <script>
        //分析
        //var a; var b; fn(){}; arr; obj;
        var a = 1;
        var b = 'hello';
        function fn() {
            console.log('fn...');
        }
        var arr = ['a', 'b', 'c'];
        var obj = { name: 'wc', age: 100 }
    </script> -->



    <!-- <script>
        //原题
        function fn(a) {
            console.log(a);
        }
        fn(110);
        console.log(a);
    </script> -->

    <!-- <script>
        //分析
        //fn(){};
        //var a;
        function fn(a) {    //函数形参（局部变量）变为110
            console.log(a); //110
        }
        fn(110);
        console.log(a);
    </script> -->



    <!-- <script>
        //原题
        var arr = [11, 22];
        function fn(arr) {
            arr[0] = 100;
            arr = [666];
            arr[0] = 0;
            console.log(arr);
        }
        fn(arr);
        console.log(arr);
    </script> -->

    <!-- <script>
        //分析
        //arr; fn(){}; 
        //arr; 
        var arr = [11, 22];//栈地址 0x666
        function fn(arr) { //给形参arr 赋值为 0x666
            arr[0] = 100;  //0x666指向的堆 数据变为[100,22];
            arr = [666];   //把新堆[666]的地址0x888赋值给 形参arr 此时形参中的arr指向了 0x888
            arr[0] = 0;    //修改ox888中的数据 ox888指向的堆的数据由[666]变为[0]
            console.log(arr); // 打印ox888堆中的数据 [0]
        }
        fn(arr);//形参arr 赋值为 0x666
        console.log(arr); //打印全局执行上下文中的arr 它指向ox666 数据为[100,22]
    </script> -->



    <!-- <script>
        //原题
        var a = 1;
        var b = 1;
        function gn() {
            console.log(a, b);
            var a = b = 2;
            console.log(a, b);
        }
        gn();
        console.log(a, b);
    </script> -->

    <!-- <script>
        //分析
        //var a; var b; gn(){}; 
        //var a;
        var a = 1;
        var b = 1;
        function gn() {
            console.log(a,b); //a 为und  b 没有提升在AO找不到 就去父级VO中找 父级VO中有b = 1 所以und 1
            var a = b = 2;
            console.log(a,b); //a 赋值为2 b赋值为2 所以父级中的b 由1 变成了2
        }
        gn();
        console.log(a, b);  //打印ECG中的a,b结果为：1,2
    </script>  -->



    <!-- <script>
        //原题
        var a = 1;
        var obj = { uname:'wangcai'}
        function fn(){
            var a2 = a;
            obj2 = obj;
            a2 = a;
            obj.uname = 'xiaoqiang';
            console.log(a2);
            console.log(obj2);
        }
        fn();
        console.log(a);
        console.log(obj);
    </script> -->

    <!-- <script>
        //分析
        //var a; obj; fn(){}; obj2
        //var a2; 
        var a = 1;
        var obj = { uname: 'wangcai' }
        function fn() {
            var a2 = a; //找a a在VO中值为1 赋值给a2 a2为1
            obj2 = obj; //把obj的地址0x666复制给了 obj2
            a2 = a;     //又把 VO中的1 赋值给了 a2
            obj.uname = 'xiaoqiang'; //0x666 中的wangcai变为了xiaoqiang 
            console.log(a2);        //打印a2 为1
            console.log(obj2);      //打印obj2 为ox666中的xiaoqiang
        }
        fn();
        console.log(a); //打印VO中的a 为1
        console.log(obj);//打印obj 为xiaoqiang
    </script> -->


    <!-- <script>
        //原题
        var a = [1,2];
        var b = a; //b 和 a 指向同一个堆
        console.log(a,b); //[1,2] [1,2]
        b[0] = 110; //[110,2]
        console.log(a,b);//[110,2] [110,2]
    </script> -->

    <!-- <script>
        //原题
        var a = [1,2];
        var b = [1,2];
        console.log(a == b);//false == 比较的是地址 不同的堆 地址是不可能一样的
        console.log(a === b);//false
    </script> -->

    <!-- <script>
        //原题
        var a = [1,2];
        var b = a;
        console.log(a == b);//a 和 b指向同一个堆 所以为true
        console.log(a === b);//a 和 b指向同一个堆 所以为true
    </script> -->

    <!-- <script>
        //原题
        console.log(a,b);//a变量提升本身应该为und 但是b没提升 b为 b is not defined 所以直接报错
        var a = b = 3;
    </script> -->

    <!-- <script>
        //原题
        var a = {m:666};
        var b = a;//把a的地址赋值给b
        b = {m:888};//把新地址赋值给b b的地址变了
        console.log(a);//a的值还是m:666没变化
    </script> -->

    <!-- <script>
        var a = {n:12};
        var b = a;
        b.n = 13;
        console.log(a.n);//13
    </script> -->

    <!-- <script>
        console.log(a); //a is not defined
        a = 110;
    </script> -->

    <!-- <script>
        var m = 1;
        n = 2;
        console.log(window.m);//1
        console.log(window.n);//2
    </script> -->

    <!-- <script>
        function fn(){
            var a = 111;
        }
        fn();
        console.log(window.a);//undefined
    </script> -->

    <!-- <script>
        var a = -1;
        if(++a){      //++a的值为新值 为0  0 为false
            console.log('666');// 不执行 
        }else{
            console.log('888');//打印888
        }
    </script> -->

    <!-- <script>
        //var a; var b;
        console.log(a,b);//und und
        if(true){
            var a = 1;
        }else{
            var b = 2;
        }
        console.log(a,b);//1 und
    </script> -->

    <!-- <script>
        var obj = {
            name:'wc',
            age:18
        }
        //in 为运算符 判断一个属性是否属于某个对象
        console.log('name' in obj);//true
        console.log('score' in obj);//false
    </script> -->

    <!-- <script>
        //var a;
        var a;
        console.log(a);//und
        if('a' in window){
            a = 110;
        }
        console.log(a);//110
    </script> -->

    <!-- <script>
        //var a;
        console.log(a);//und
        if('a' in window){
            var a = 110;
        }
        console.log(a);//110
    </script> -->

    <!-- <script>
        //var a; fn(){};
        //var a;
        var a = 100;
        function fn(){      //函数内部有a 并且加var了 所以提升 先提升再执行 
            console.log(a); //所以还没有执行到return 打印undefined
            return;
            var a = 100;
        }
        fn();
    </script> -->

    <!-- <script>
        //提升
        //var n; foo(){};
        //foo中把全局变量中的n的值改成了200
        var n = 100;       //这两个n是同一个n
        function foo(){
            n = 200;       //这两个n是同一个n
        }
        foo();//调用完函数后把全局变量中的n的值改成了200
        console.log(n);//打印全局变量n = 200
    </script> -->

    <!-- <script>
        //fn(){}; 
        //var a;
        function fn(){
            var a = b = 100;//var a = 100; b = 100; b在AO中没有定义
        }                   //所以到VO中找 但是VO中也没有 所以报错        
        fn();
        console.log(a);//100
        console.log(b);//b is not defined
    </script> -->

    <script>
        //var n; fn(){}; gn(){};
        //
        var n = 100;//全局变量n = 100
        function fn(){
            console.log(n);//打印n 自己里面没有n 按照作用域链到父级找
                           //找到GO中全局变量n = 100
        }
        function gn(){
            var n = 200;
            console.log(n);//200
            fn()//fn()在全局代码段中调用 父级是GO 
        }
        gn();//200 100
        console.log(n);//100
    </script>

深入变量

加var变量和不加var变量的区别：

  • 加var的全局变量会在预编译期间提升到代码段的最前面，不加var的变量不会提升。
  • 加var的变量有可能是全局变量，也有可能是局部变量，不加var的变量只可能是全局变量。
  • 加var的局部变量不会作用到window的属性。

let声名的变量:

  • let声明的变量不会提升
  • let声明的变量不会作用到window的属性
  • let和{}配合产生局部作用域 局部作用域外部访问不到{}里面的数据

const声明的变量：

  • const主要声明常量，const声明必须初始化赋值
  • const声明的变量不可以改变
  • const声明的变量不会提升
  • const和{}配合会形成块级作用域，块里面的数据外部访问不到
  • const声明的常量也不会挂载到GO上

闭包

什么是闭包

  • 闭包就是一个不能被销毁的栈空间（内存）局部EC
  • 一个普通函数可以访问外层作用域的自由变量，那么这个函数就是一个闭包
  • 闭包的作用：
  • 延长闭包中数据的生命周期，所对应的内存会一直存在不会被释放掉，造成内存泄漏
  • 外面想去访问里面的数据，是访问不了的

函数是一等公民

  • 在JavaScript中，函数是非常重要的，并且是一等公民 高阶函数就是函数可以作为另一个函数的参数，也可以作为另外一个函数的返回值来使用

IIFE

IIFE就是立即函数调用表达式的意思。

    <script>
        //IIFE 就是立即调用函数表达式的意思
        //函数后加小括号 然后整体用小括号包起来
        //01(function say(){ console.log('hello');}())
        //02+function say(){ console.log('hello');}()
        //03-function say(){console.log('hello');}()
        //04!-function say(){console.log('hello');}()
        //05(function say(){console.log('hello');})()
        //如果IIFE前面是return +-!()可以不写
        //也就是IIFE是函数内部的return后的函数的时候 +-！()可不写
    </script>

高阶函数：

  • 一个函数的参数是函数 或 他的返回值是函数，那么这个函数就是高阶函数。
  • 自己手写的高阶函数 函数的参数是一个函数
function fn(a){
	a();
};
function gn(){
	console.log(666);
}
fn(gn);
  • 数组中的高阶函数
  • filter 过滤函数返回值是过滤得到的新数组
  • map 映射函数
  • forEach快速遍历
  • find查找函数 返回的是找的到元素 找不到返回und
  • findIndex 查找函数 返回的是 数组下标 找不到返回-1
    <script>
        let nums = [2, 23, 77, 45, 3, 8, 10];
        // nums.filter() 表示调用函数
        // nums.filter(function(){}) 把一个匿名函数作为函数的实参 传给filter
        //filter是JS中内置好的高阶函数
        //filter的返回值是一个数组
        //匿名函数作为filter高阶函数的实参 这个匿名函数也有自己的形参item item 表示数组的每一项
        //就相当于 匿名函数的形参item 在匿名函数里的arguments 包含了所有的实参
        let newArray = nums.filter(function (item) {
            // return true; 表示把item中的每一项都放到新数组中
            return item % 2 == 0;
        })
        console.log(newArray);
    </script>

    <script>
        //map 映射 对数组中的每一项进行加工
        let nums1 = [2, 23, 77, 45, 3, 8, 10];
        let newArray1 = nums1.map(function(item){
            return itme * 10;
        })
        console.log(newArray1);
    </script>

    <script>
        //forEach
        let nums2 = [2, 23, 77, 45, 3, 8, 10];
        let newArray2 = nums2.forEach(function(item){
            console.log(item);
        })
    </script>

    <script>
        //find
        let nums3 = [2, 23, 77, 45, 3, 8, 10];
        let itemm = nums3.find(function(item){
            return item === 8;
        })
        console.log(itemm);//返回的是查找的元素 找不到返回的是 und
    </script>

    <script>
    	//findIndex
        let nums4 = [2, 23, 77, 45, 3, 8, 10];
        let itemm = nums4.findIndex(function(item){
            return item === 3;
        })
        console.log(itemm);//返回的是 数组下标
    </script>

this指向与this相关

默认绑定

  • 默认绑定就是独立函数调用，可以理解为用window调用了这个函数只不过没有加.所以独立函数调用中this为window

隐式绑定

  • 独立函数调用，把对象内的方法地址传给外部变量，通过外部变量加（）调用对象里面的方法，此时方法里的this表示的是window
  • 通过对象.方法名+（）调用对象内部的方法，方法中出现的this就看.前面的是谁，this就代表了谁。

显示绑定

  • 函数也是对象 上面有几个默认的方法 通过call apply bind 可以改变this指向
    使用方法：想要改变this指向的函数名.call(想要指向的东西);
    使用方法：想要改变this指向的函数名.apply(想要指向的东西);
    使用方法：想要改变this指向的函数名.bind(想要指向的东西);
    注意：
    call 和 apply 不仅可以显示绑定this 而且还会让函数执行
    call 会将传入想要指向的东西 包装成一个新的对象返回
    bind 显示绑定this 不会让函数执行 返回一个绑定this 之后新函数

new绑定

  • 使用new创建一个对象
    第一步这个new会在类中生成一个空的对象(堆)
    第二步这个new中会生成一个this 这个this指向了这个堆
    第三步使用类生成的这个对象也会指向这个堆

规则优先级

  • 默认规则的优先级最低
  • 显示绑定优先级高于隐式绑定
  • new绑定优先级高于隐式绑定
  • new绑定优先级高于隐式绑定
  • new绑定优先级高于bind
  • new绑定和call、apply是不允许同时使用
  • new绑定可以和bind一起使用，new绑定优先级更高

忽略显示绑定

  • 如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则

箭头函数中this指向

  • 箭头函数中的this指向外面一层。

面向对象

创建对象的几种方式

    <script>
        
        创建对象的几种方式：
            字面量法：
                let obj = {};

            new方法：
                let obj = new Object(); new一个Object类 生成一个obj对象 //Object叫类也叫构造器
                let str = new String(); new一个String类 生成一个str对象 //String叫类也叫构造器

            工厂模式：
                function Person(name,age){
                    let obj={};
                    this.name = name;
                    this.age = age;
                    return obj;
                };
                let cc = Person('陈城',21);
                let gh = Person('高涵',22);
                打印出它的类时，都是Object 每个对象都是Object的实例
                这种方式 生成的对象 对应的全部都是 Object类 不能很真实的反应对象所对应的类

            构造函数法：
                创建一个手机类
                function Phone(name,price){
                    this.name = name;
                    this.price = price;
                }
                let mi = new Phone('小米',1999);
            new做了什么:
                在构造器的内部创建了一个新的对象
                让构造器中的this指向这个对象
                执行构造器中的代码
                如果构造器没有返回对象，那么返回这个被创建的新的对象
                这个对象内部的prototype属性会被赋值为该构造函数的prototype属性
            
            构造器+原型创建对象
                把共有的属性放到原型上
                    function Player(name){
                        this.name = name;
                    }
                    Player.prototype.game() = function(){
                        console.log(this.name + '开始比赛');
                    }
                    let qiaodan = new Player('乔丹');
                    qiandan.game();

            位于类上的属性叫做：静态属性
                    
            判断 一个对象是否属于 一个类 对象.instanceof(类)
            str.instaceof(Number);//false
        
    </script>

私有属性和公有属性

    <script>
        /* 
            一切都是对象
            对象是属性的无序集合
            原型链：
                查找对象上的属性，如果对象本身的私有属性中没有，那么会沿着__proto__到创建对象的构造器的原型对象中找
                每一个对象都有一个__proto__那么构造器的原型对象也有一个__proto__ 在创建对象的构造器的原型对象中
                还是找不到的话 也会沿着__proto__去Object 的原型对象中找 找不到的话 继续沿着__proto__找 找到null
                还找不到就报错，这个沿着__proto__查找属性的链 就叫原型链。

                每一个函数(构造器中都有一个prototype属性) 这个prototype指向这个构造器的原型对象
                每一个对象都有一个__proto__的属性 这个属性指向 创建它的构造器的原型对象
                原型对象中不仅有__proto__而且还有一个constructor指向创建原型对象的构造器
                构造器的prototype指向和这个构造器生成的对象中的__proto__指向的是同一个原型对象
                构造器的prototype指向创建的原型对象
                所有函数的默认原型都是Object的实例
                通过__proto__可以向上查找属性 
        */
    </script>

    <script>
        let arr2 = new Array('a','b','c');
        console.log(arr2);
        console.log(arr2.__proto__);//Array 原型对象
        //打印创建出arr2这个对象的原型对象 也就是打印Array的原型对象
        console.log(arr2.__proto__.__proto__);//Object 原型对象
        //每一个对象都有一个__proto__ 那么 Array的原型对象的__proto__也指向创建Array的原型对象的原型对象 这个对象为Object
        
        console.log(Array.prototype == arr2.__proto__);
        console.log(arr2.__proto__.constructor == Array);//true 
        //每一个原型对象上不仅有一个__proto__ 还有一个constructor 这个constructor 指向这个构造器

        console.log(arr2.__proto__.constructor);//Array 原型对象
    </script>

精细化设置对象中的属性

    <script>
        /* 
        精细化设置对象中的属性
            数据属性描述符 configurable enumerable writable value
            Object.defineProperty(目标对象,作用的属性,{
                value:设置的属性值,
                configurable:是否可以删除,//默认都是true ture表示可以删除
                enumerable:是否可以枚举,//默认都是true ture表示可以枚举
                writable:是否可以重新赋值//默认都是true ture表示可以修改
            })
            存取属性描述符 get set
            get:当获取属性的时候会执行的函数 默认为undefined
            set:当设置属性的时候会执行的函数 默认为undefined
            Object.defineProperty(目标对象,作用的属性,{
                configurable:false,
                enumerable:false,
                get:function(){
                    console.log('get...');
                    return this._address;
                }
            })
        */
    </script>

    <script>
        /* 
        get作用：
            获取器：当调用添加精细化添加的属性 那么就会自动调用defineProperty中的get 返回对象中的属性
        set作用：
            设置器：当给精细化属性重新赋值的时候，就会自动调用set函数 把修改的值 赋值给对象中的属性
        */
        let obj = {
            name:'sc',
            age:22,
            _address:"商丘"
        }
        Object.defineProperty(obj,'address',{
            configurable:false,
            enumerable:false,
            get:function(){         //获取器 当调用address 就执行里面的函数
                // console.log('get..');
                return this._address;//可以是对象的任意属性
            },
            set:function(value){    //设置器 当修改address 就执行里面的函数 把_address的值修改为 传入的address的值
                // console.log('set...');
                this._address = value;
            }
        })

        console.log(obj.address);//商丘
        obj.address = '博爱'; //修改对象中的属性值 把精细化属性值 "博爱" 赋值给对象中的属性值 this._address = value;
        console.log(obj._address);//博爱
    </script> 

    <script>
        /* 
        给多个属性精细化设置
        Object.definproperties(obj,{
            作用的属性：{

            },
            作用的属性：{

            }
        })
        */
       let obj = {
           _age:18,
           _address:'香港'
       }
       Object.defineProperties(obj,{
           name:{
               value:'修狗',
               configurable:true,
               enumerable:true,
               writable:true
           },
           address:{
               configurable:true,//可以删除
               enumerable:true,//可以枚举
               get:function(){
                   return this._address; //当调用address就会执行address里面的get方法返回_address
               },
               set:function(value){     //当修改address就会执行set方法 然后把对象中原本的属性对应的属性值改变
                    this._address = value;
               }
           }
       })
       console.log(obj.name);
       console.log(obj.address);
       obj.address = "台湾";
       console.log(obj._address);

    </script>

    <script>
        /* 
        get 和 set 在对象中的使用
        */
       let obj = {
           _name:'cc',
           get name(){//获取器
               return this._name;
           },
           set name(value){//设置器
                this._name = value;
           }
       }
       //当我们obj.name的时候就会返回 obj中的_name
       console.log(obj.name);//'cc'

       //当我们修改 obj.name的时候 就会自动调用对象里面的 set方法
       obj.name = 'sc';
       console.log(obj.name);//调用obj.name get方法执行 输出obj中的_name
    </script>

继承

原型链继承

    <script>
        function Parent() {
            this.hobby = ["eat", "run"]
        }
        Parent.prototype.getName = function () {
            console.log(this.name);
        }

        function Child() { }

        Child.prototype = new Parent();     //创建一个父类对象作为子类的原型对象
        Child.prototype.constructor = Child;//新建的原型对象的constructor指向Child类

        let c1 = new Child()                //新建一个子类的对象
        let c2 = new Child()                //新建一个子类的对象
        c1.hobby.pop(); // 删除子类原型对象中数组中的一个元素
        console.log(c1.hobby);  //["eat"]//因为子类对象全部都指向子类的原型对象 
        console.log(c2.hobby);          //所以只要有子类对象对子类原型对象中的属性做修改 
                                        //其他子类对象再调用子类原型对象中的属性是时就会受到影响 （就是属性值发生了改变）
    </script>

构造函数继承

     <script>
         /* 
        构造函数继承实质：
            就是把父类中的this指向了子类
            所以子类对象获得了父类中的属性
        构造函数继承的不足：
            父类中的属性和方法都想被子对象继承的话，只能把属性和方法写在构造函数中
            如果是方法体的话，方法体一模一样，每创建一个子对象，都会有一个独立的堆空间
            但是方法的代码是一模一样的，这就造成了内存空间的浪费
        */
        //构造函数继承实质：
        //就是让父类原本指向父类对象的this 指向子类的对象
        //那么子类对象就可以通过父类添加属性
        //利用call方法不仅可以修改父类中的this指向，而且可以直接给子类对象设置属性
        //这样子类每new一次 子类对象就可以从父类那里获得到父类私有属性
        function Parent(){
            this.name = 'cc';
            this.hobby= [1,3,5];
        }
        function Child(age){
            this.age = age;
            Parent.call(this);//更改父类this指向 使父类this指向子类对象
        }
        let c1 = new Child(20);
        console.log(c1);//Child{age:20,name:'cc',hobby:[1,3,5]};
        //得到的是父类的姓名和 自己的年龄 
        //需要自己设置姓名和爱好 
    </script>

组合继承

    <script>
        /*
        组合继承：
            第一：父类的this指向子类的this 子类对象可以获得父类的私有属性
            第二：子类的原型对象 改变成了父类的对象， 子类的对象可以通过原型对象 获得 父类原型对象上的方法和属性。
            总结：
            这种方法不仅可以使得子类的对象继承了父类的私有属性，而且父类把方法添加到父类原型对象上 
            通过子类更改原型对象为父类的对象 可以获取父类原型对象上的属性和方法。这样方法在原型对象上 就不会造成内存空间浪费
        */
    </script>
    <script>
        function Father(name,age){
            this.name = name;
            this.age = age;
        }
        Father.prototype.getName = function(){
            console.log(this.name);
        }
        function Son(sex,name,age){
            this.sex = sex;
            Father.apply(this,Array.from(arguments).slice(1));
        }
        Son.prototype = new Father();
        Son.prototype.constructor = Son;

        let s1 = new Son('男','杜宜霖','22');
        console.log(s1);
        s1.getName();
    </script>

寄生组合继承

    <script>
        function Parent(name, hobby) {
            console.log("lalala");
            this.name = name;
            this.hobby = hobby;
        }
        Parent.prototype.eat = function () {
            console.log("eat...");
        }
        function Child(id) {
            Parent.apply(this, Array.from(arguments).slice(1))
            this.id = id;
        }
        // Child.prototype = new Parent();
        // 这样行，好吗？
        // 不好，因为你让子的原型和父的原型指向了同一个对象
        // 如果父修改了原型对象，子也要受到影响
        Child.prototype = Parent.prototype;
        Child.prototype.constructor = Child;

        let c1 = new Child(1, "c1", ["haha"])
        let c2 = new Child(2, "c2", ["xixi"])

        c1.eat();
        c2.eat();
    </script>
JS高级用法：像大神一样玩转JavaScript_js 高级用法 像大神一样玩转 javascript
2401_85124329的博客
06-15 956
/ 使用数组模拟堆// 入堆// 出堆// 使用数组模拟栈// 入栈// 出栈// 使用数组模拟队列// 入队// 出队// 深度优先遍历// 广度优先遍历return arr;i++) {} else {// 查找算法：return mid;// 高阶函数// 20。
JS 高级总结
weixin_34128237的博客
07-12 1948
一、查找HTML元素 　　通常，通过 JavaScript，您需要操作 HTML 元素。 　　1、通过 id 找到 HTML 元素 　　2、通过标签名找到 HTML 元素 　　3、通过类名找到 HTML 元素 提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。 var x=document.getElementById("intro"); var y=d...
js高级
小膏的博客
09-01 1215
js高级，就是JavaScript的Es6的高级语法。首先我们提到两大编程思想： 1.面向过程编程和面向对象编程 面向过程编程就是分析问题解决需要的步骤，然后一步步实现的去实现，使用的时候一次次调用。 面向对象编程；就是先分析问题所需要的功能，把事物才分成一个个对象，然后对象之间分工合作。 面向过程编程和面向对象编程的有缺点 1.面向过程编程：代码执行效率高，但不容...
JavaScript高级
Dipper_Dubhe的博客
03-06 980
js高级 var 声明 var 声明的变量没有块级作用域（ES5中的作用域：全局和局部） 1、可以先使用，后声明 2、可以重复定义同一个变量，逻辑错误，第二次应该是修改变量，而不是定义 3、var用在for循环条件中，造成for 循环的污染的问题 4、var 声明的变量没有块级作用域（ES5中的作用域：全局和局部） let声明 语法： let 变量 = 值; ES6中为了统一并提高代码的安全性，引入了let关键字来代替var声明变量 特点： 1、let声明的变量没有预解析，不会有变量提升 2、同一作用域l
js高级01-同步异步问题.md
11-28
js高级01-同步异步问题.md
JavaScript高级第01天笔记1
08-03
本文主要探讨JavaScript的一些高级概念，主要包括函数、类和面向对象编程。 首先，我们来关注函数。在JavaScript中，函数是一种可重用的代码块，可以接受参数并返回值。函数定义有两种常见方式：函数表达式和函数...
day01-js高级第一天课件复习资料.rar
04-08
在“day01-js高级第一天课件复习资料.rar”这个压缩包中，我们推测包含的是第一天学习JavaScript高级部分的课程内容，适用于已经有一定基础，希望深入学习JS的同学。以下是对这些高级知识点的详细阐述： 1. **原型...
JavaScript高级资料JavaScript代码 素材 笔记 作业资料.zip
08-04
JavaScript高级资料JavaScript代码 素材 笔记 作业资料，学习资料 01-创建类和对象.html 02-类中添加方法(1).html 03-类的继承(1).html 04-super关键字调用父类普通函数(1).html 05-子类继承父类方法同时扩展自己...
JavaScript高级第01天笔记-stu.md
10-18
JavaScript高级第01天笔记-stu.md
Javascript学习笔记
阿远的博客
08-17 926
Javascript学习笔记一、构造函数和原型1、概述2、构造函数1、利用构造函数创建对象2、静态成员和实例成员3、构造函数的问题4、构造函数原型prototype5、对象原型__proto__6、constructor构造函数7、构造函数、实例、原型对象三者之间的关系8、原型链9、原型链成员查找规则10、原型对象this指向11、扩展内置对象二、继承1、call()2、借用构造函数继承父类型属性3、借用原型对象继承父类型方法三、ES5中的新增方法1、数组方法①forEach()②filter()③some
js高级教程
weixin_60941411的博客
04-09 295
如果布尔对象无初始值或为0，-0，null，“”（空字符串），flase,undefined,NaN,那么对象为flase，否则为true。进制转换：Number.toString(radix)：将十进制数字转换为任意进制的字符串形式，同样，radix表示进制，取值2~36。（1）构造函数是什么？将对象的共同属性当作构造函数的参数传递进去，创建函数以后，通过new关键字调用，这就是通过构造函数来创建对象。返回值是被找到的值。对于已存在构造器的对象是不能添加新的属性的，添加新的属性需要在在构造器函数中添加。
JS高级（基础篇）
Quiet_Nov的博客
04-02 512
基础总结 数据类型 一、分类 1.基本（值）类型 String：任意字符串 Number：任意数字 boolean：true/false undefind：undefind null：null 2.对象（引用）类型 Object：任意对象 Function：一种特别的对象（可以执行） Array：一直特别的对象（数值下标，内部数据是有序的） 二、判断 1.typeof：可以判断undefined/数值 2.insanceof：判断对象具体类型 3.===/===：可以
JavaScript教程（高级）
m0_56752010的博客
05-28 2879
函数声明方式function关键字（命名函数）；函数表达式（匿名函数）；（此处的Function()是一个构造函数）；var fn= new Function('参数1','参数2',...,'函数体');Function里面参数都必须是字符串格式；第三种方式执行效率低，也不方便书写因此较少使用；所有函数都是Function的实例（对象）；函数也属于对象；< script > // 函数的定义方式 // 1、自定义函数（命名函数）；} // 2、函数表达式（匿名函数）；
js高级篇
weixin_47648494的博客
08-08 746
js高级快速入门
【jS高级】：三、面向对象高级（1.对象创建模式 2.继承模式）
qq_20535249的博客
11-18 271
三、面向对象高级 1.对象创建模式 方式①: Object构造函数模式 套路: 先创建空Object对象, 再动态添加属性/方法 适用场景: 起始时不确定对象内部数据 问题: 语句太多 /* 一个人: name:"Tom", age: 12 */ // 先创建空Object对象 var p = new Object() p = {} //此时内部数据是不确定的 ...
JS高级（总结）
weixin_52482833的博客
06-06 311
01.面向对象的体现： 02.工厂函数 03.工厂函数（2） 04.构造函数问题解决 05.原型 06.构造函数、实例、原型三者之间的关系 07.原型简写 08.扩展原型方法 09.继承 10.拷贝、继承 11.原型继承 12.变量提升 13.备份this 14.apply 15.call 16.bind 17.arguments 18.高阶函数 19.函数的闭包 20.作用域 21.作用域链......
Js高级进阶
weixin_41325924的博客
03-02 4978
一、面向对象 (1) 通过class 关键字创建类 类名 我们还是习惯性定义首字母大写 (2) 类里面有个 constructor 函数 可以接受传递过来的参数 同时返回实例对象 (3) constructor 函数 只要 new 生实例时 就会自动调用这个函数 如果我们不写这个函数 类也会自动生成这个函数 (4) 生成实例 new 不能省略 (5) 最后注意语法规范 创建类 类名后面不要加小括号 生成实例 类名后面加小括号 构造函数不需要加 function 1.创建类和生成实例 <..
JS 高级（三）继承、多态、ES5严格模式
商务合作 | 共同学习 | 携手共进
09-08 6902
JavaScript：面向对象（继承、多态）、ES5严格模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值