zoukankan      html  css  js  c++  java
  • js作用域对象与运用技巧

    1. JS作用域

    1.1 全局作用域和局部作用域

    • 函数外面声明的就是 全局作用域
    • 函数内是局部作用域
    • 全局变量可以直接在函数内修改和使用
    • 变量,使用var是声明,没有var是使用变量。 如果在函数内使用var来声明变量,在函数内会覆盖同名的全局变量

    1.2 变量提升

    • 在变量声明之前 去使用变量 会得到 undefined ,而不是报错
    • 函数内,如果声明了跟全局变量同名的局部变量, 在声明之前使用改变量,得到undefined( 该变量已经是局部的啦)

    1.3 作用域链

    • 当一个作用域 使用某个变量时,先从本作用域中找, 如果没有去父作用域,再没有,父作用域的父作用域,一直到 全局作用域。 构成了一个作用域链

    1.4 闭包

    • 通常需要 函数中 返回一个 函数
    • 目的 把一个局部作用域的 数据 让外层的作用域使用

    1.5 ES6 新增一 块状作用域

    • let关键字也可以声明变量,同var一样
    • 但是let关键字声明的变量,会在结构语句中产生 块状作用域
    • ES6建议 使用let代替 var

    2. JS对象

    2.1 构造函数和对象

    构造就是类
    function User([参数]) {
        this.属性 = 值;
        this.属性 = 值;
        
        this.方法 = function(){
            
        }
    }
    
    #实例一个对象
    new 构造函数();
    如果构造函数没有参数 可以 不加()
    

    2.2 JS原型和原型链

    原型

    • 每个对象 都有原型 (原型仍然是一个对象)
    • 对象可以继承原型的属性和方法
    • __proto__ 所有对象都有该属性, 该属性指向该对象的原型

    原型链

    • 原型作为对象 也有原型
    • 原型的原型的原型 就构成了 原型链
    • 使用对象中某个属性的时候,先从对象中找,如果没有,从原型上找,原型如果也没有,继续向上找,直到顶层 (顶层的原型对象是一个 类型(类)(构造函数)是Object 的对象)

    2.3 JS对象属性的调用

    .  点
    obj.name
    obj.age
    
    []  中括号
    obj['name']
    obj['age']
    
    任意的对象
    都可以在对象实例化完成后,
    添加属性和方法
    

    2.4 Object 构造函数

    js內建的构造方法叫Object
    var obj = new Object()
    
    json方式定义对象
    var obj = {属性:值,属性:值}
    new Object()的简写
    

    实用技巧

    3.1 从页面中获取元素

    document.getElementById()
    根据ID的值获取元素对象
    document.getElementsByTagName()
    根据标签名取元素对象
    document.getElementsByClassName()
    根据class的值取元素对象
    document.getElementsByName()
    根据name属性的值获取元素对象
    document.querySelector(css选择器)
    返回满足条件的第一个元素对象
    document.querySelectorAll(css选择器)
    返回所有满足条件元素组成的类数组对象
    

    3.2 给元素绑定事件

    先获取元素
    ele.onclick = function(){
        
    }
    
    获取元素的类数组对象, 遍历,挨个给每个元素绑定事件
    

    3.3 修改元素的CSS样式

    ele.style.css属性名
    ele.style.background
    ele.style.border
    ele.style.backgroundColor
    ele.style['background-color']
    

    3.4 设置元素的class值

    ele.className
    可以赋值,也可以获取
    ele.classList.add('值')
    添加一个class值
    ele.classList.remove('值')
    删除一个class值
    ele.classList.toggle('值')
    自动切换一个class值(有就删除,没有就添加)
    

    3.5 事件

    onclick         单机
    ondblclick      双击
    oncoutextmenu   右击
    onmouseover/onmouseenter
    鼠标悬浮在元素上
    onmouseout/onmouseleave
    鼠标离开元素
    onmousemove     鼠标在上面移动
    onmousedown     鼠标的按键按下
    onmouseup       鼠标的按键抬起
    

    3.6 js定时

    单次定时

    setTimeout(fn,delay)
    clearTimeout()  清除定时
    

    多次定时

    setInterval(fn,dealy)
    clearInterval()  清除定时
  • 相关阅读:
    冲刺——第三天
    冲刺——第二天
    梦断代码前三章略有感想
    四则运算法则设计思路
    第一期阅读计划
    软件工程概论第一次课堂小测-------产生30个100以内的随机整数四则运算的小程序
    软件演化
    软件测试
    软件实现
    面向对象设计
  • 原文地址:https://www.cnblogs.com/luck-L/p/9465277.html
Copyright © 2011-2022 走看看