JavaScript-③

最新推荐文章于 2025-01-18 00:20:33 发布

原创最新推荐文章于 2025-01-18 00:20:33 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

36 篇文章

订阅专栏

本文深入探讨JavaScript的高级特性，包括函数封装、事件处理、构造函数使用、ES6新特性如参数默认值和剩余参数，以及变量传递机制。通过具体代码示例解析不同场景下JavaScript的运用技巧。

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

1.封装逻辑

 <script>
        function max(x,y){
            return x>y?x:y;
        }
        console.log(max(1,2));
        console.log(max(3,4))
    </script>

在这里插入图片描述
2.事件处理

<body>
<input type="button" value="点击" onclick="doClick()">
<script>
    function doClick(){
        alert("gogo");
    }
</script>
</body>

在这里插入图片描述

3.新类型构建-this-circle
详细参考JavaScript面积求解-构造函数和普通函数的区别
4.参数默认值（ES6有关）

 <script>
   function fn(x,y=10,z=100){
       console.log(x);
       console.log(y);
        console.log(z);
   }
   fn(1,100,2000);
   </script>

在这里插入图片描述

<script>
    function fn(x,y=10,z=100){
        console.log(x);
        console.log(y);
        console.log(z);
    }
    fn(1,100);
</script>

在这里插入图片描述

<script>
    function fn(x,y=10,z=100){
        console.log(x);
        console.log(y);
        console.log(z);
    }
    fn(1,100,50,20,30);
</script>

在这里插入图片描述

5.剩余参数（ES6）
我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数。（这个新的对象和arguments不一样，它是程序员自定义的一个普通标识符，只是需要在前面加上三个点：…）

<script>
    function fn(x,y,...z){
        console.log(x);
        console.log(y);
        console.log(z);
    }
    fn(1,3,4,5);
</script>

在这里插入图片描述

<script>
    function func(a, ...rest) {
        console.log(a)
        console.log(rest)
    }
    func(1)
    func(1, 2, 3, 4)
</script>

//注意func的第二个参数rest，前面有三个点。定义好后调用了两次，结果分别如下：
可以看到第一次调用时，rest为一个空数组，第二次为[2, 3, 4]
在这里插入图片描述

<script>
    function func(a, b, ...rest) {
        console.log(a, b)
        console.log(rest)
    }
    func(1, 2)
    func(1, 2, 3, 4)
</script>

在这里插入图片描述
proto
proto: Array(0)
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
findIndex: ƒ findIndex()
flat: ƒ flat()
flatMap: ƒ flatMap()
forEach: ƒ forEach()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
lastIndexOf: ƒ lastIndexOf()
length: 0
map: ƒ map()
pop: ƒ pop()
push: ƒ push()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
reverse: ƒ reverse()
shift: ƒ shift()
slice: ƒ slice()
some: ƒ some()
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
proto: Object

6.传值还是传引用（还是有点懵！！！）

function fn(name){
        console.log(name);
        name="Jason";
        return name;
    }
    var name="ChenJunSheng";
    var back=fn(name);
    console.log(back);
    console.log(name);

在这里插入图片描述

function fn1(obj){
        var name=obj.name;
        console.log(obj.name);
        obj.name="Jason";
        //   return obj;
    }
    var person={name:"ChenJunsheng"};
    fn1(person);
    console.log(person.name);

在这里插入图片描述

 function fn2(obj){
        console.log(obj.name);
        obj={name:"Jason"};
        return obj;
    }
    var person1={name:"chenjunsheng"};
    var back2=fn2(person1);
    console.log(back2.name);

    console.log(persion1.name);

在这里插入图片描述
7.作为参数的函数

function hd(){
        alert("loaded");
    }
   // ===
   //     let hd=function(){
   //         console.log("loaded");
   //     }
   window.addEventListener("load",hd);

在这里插入图片描述
和下面的效果是一样的

  window.addEventListener("load",function(){
        alert("load");
    });

在这里插入图片描述

function makeRequest(url,cb) {
        setTimeout(function () {
            cb();
        },3000);
    }
    makeRequest("sina",function () {
        alert("back");
    });

在打开浏览器之后3s出现弹框
在这里插入图片描述
8.全局变量和局部变量
js中全局变量和局部变量的区别