js高级技巧

骑猪看日落 2022-05-18 05:22 226阅读 0赞

# js高级技巧 #

## 安全的类型检测 ##

let data = [1,2,3,4]
    console.log(data instanceof Array)

但是上面的方法在iframe下访问父窗口变量的时候会失败

<iframe src="./iframe.html" frameborder="0"></iframe>
    <script>
        let data = [1,2,3,4]
        console.log(data instanceof Array)
    
        window.global = {
            arr:[1,2,0,43]
        }
        console.log("self",window.global.arr instanceof Array)
    </script>
    
    
    // iframe 内容
    
    <script>
        console.log("iframe",window.parent.global.arr instanceof Array)
    </script>
    
    
    
    
    /// 当把一个函数当作参数传个另一个函数时，此函数的执行上下文往往会发生变化
    
            class draw{
                constructor(){
                    this.point = []
                }
                handleMouseClick(event){
                    this.point.push(event.latLng)
                }
                init(){
                    $map.on('click',this.handleMouseClick)   ///这里的this不再指向draw
                }
            }
    
    
    /// 方法一
    
            class draw{
                constructor(){
                    this.point = []
                }
                handleMouseClick(event){
                    this.point.push(event.latLng)
                }
                init(){
                    let _this = this;
                    $map.on('click',event=>_this.handleMouseClick(event))   ///这里的this不再指向draw
                }
            }
    
    // 由于使用了箭头函数this 还是指向父级的上下文所以这里直接使用this也是可以的
    
    init(){
        $map.on('click',event=>this.handleMouseClick(event))   ///这里的this不再指向draw
    }

## 防止篡改对象 ##

有时候要防止写好的对象被误篡改，所以要写一些保护方法

1.  Object.seal防止新增和删除属性

let person = {
        name:1
    }
    
    Object.seal(person)
    
    delete person  //false
    
    person.age=3    //再次查询是undefined
    //使用严格模式时会报错

1.  Object.freeze冻结对象

这个方法是不能改属性值 也不能增加属性

b = {
       a:2}
    {
       a: 2}
    Object.freeze(b)
    {
       a: 2}
    b.t=2
    2
    b
    {
       a: 2}
    b.t 
    undefined
    b.a=99
    99
    b
    {
       a: 2}
     //严格模式下会报错 // 使用Object.isFrozen 、 Object.isSealed 、 Object.isExtensive 判断当前对象的状态

1.  defineProperty 冻结单个属性

如果设置enumable/writalbe 为 false ，那么这个属性将不可遍历和写

m = {
        name:'qqq'
    }
    {name: "qqq"}
    Object.defineProperty(m,'grade',{enumerable:false,value:3})   ///将不可遍历
    {name: "qqq", grade: 3}
    for(let key in m){console.log(key)}
    VM4830:1 name
    undefined
    
    
    
    
    y={m:12}
    {m: 12}
    Object.defineProperty(y,'grade',{writable:false},44)  ///不可修改
    {m: 12, grade: undefined}
    y
    {m: 12, grade: undefined}
    y.grade=4
    4
    y
    {m: 12, grade: undefined}

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 js高级进阶：promise同步编程技巧

promise是ES6引进的异步编程解决方案，是一个构造函数，可以实例化对象，可以解决回调地狱的问题。首先我们看一下promise的实例化对象是什么： let

旧城等待，/ 2023年10月13日 15:15/ 0 赞/ 30 阅读

相关 JS数组reduce()方法详解及高级技巧

> reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的

╰+哭是因爲堅強的太久メ/ 2022年12月19日 06:07/ 0 赞/ 184 阅读

相关 CSS高级技巧

CSS高级技巧精灵图sprites 字体图标 Unicode引用 CSS三角做法 CSS三角进阶解决图片底部空白

旧城等待，/ 2022年11月16日 10:42/ 0 赞/ 272 阅读

相关 js高级技巧之密封对象

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] Object.seal()方法可以保护对象不被篡改

- 日理万妓/ 2022年10月01日 15:52/ 0 赞/ 182 阅读

相关 JS数组reduce()方法详解及高级技巧

[https://www.jianshu.com/p/e375ba1cfc47][https_www.jianshu.com_p_e375ba1cfc47] [https_

灰太狼/ 2022年09月02日 12:58/ 0 赞/ 178 阅读

相关 JS高级技巧汇总

更新时间：2017年11月09日12:26:37 [《我的博客地图》][Link 1] 1、函数节流场景：监听页面滚动到距离底部小于等于10px，触发请求分页数

矫情吗；*/ 2022年06月06日 12:47/ 0 赞/ 248 阅读

相关 JS高级技巧

https://fed.renren.com/2017/09/03/js-profesional-skill/?utm\_source=tuicool&utm\_medium=

拼搏现实的明天。/ 2022年06月05日 07:09/ 0 赞/ 258 阅读

相关 JS高级技巧(简洁版)

高级函数由于在`JS`中，所有的函数都是对象，所以使用函数指针十分简单，也是这些东西使`JS`函数有趣且强大安全的类型检测 `JS`内置的类型检测机制并不是完

小灰灰/ 2022年05月25日 13:14/ 0 赞/ 211 阅读

相关 js高级技巧

js高级技巧安全的类型检测 let data = [1,2,3,4] console.log(data instanceof Array) 但是

骑猪看日落/ 2022年05月18日 05:22/ 0 赞/ 227 阅读

相关 JS数组reduce()方法详解及高级技巧

> reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的

今天药忘吃喽~/ 2021年10月29日 09:38/ 0 赞/ 312 阅读