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()  清除定时
posted @ 2018-08-12 22:26  luck_L  阅读(833)  评论(0编辑  收藏  举报