JavaScript学习笔记三

小刘私坊

已于 2023-05-09 20:35:52 修改

阅读量611

点赞数

分类专栏：前端文章标签： javascript 学习笔记

于 2023-05-02 10:38:32 首次发布

本文链接：https://blog.csdn.net/python_ghost/article/details/130461857

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

匀速动画:

实现原理

通过定时器setInterval() 不断移动盒子位置

步骤：

获取盒子当前位置
让盒子在当前位置加上1个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
元素需要添加定位，才能使用element.style.left

/* 
      - 获取盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 元素需要添加定位，才能使用element.style.left
      */

var oDiv = document.querySelector('div')

var timer = setInterval(function () {
    if (oDiv.offsetLeft >= 400) {
        // 停止定时器  停止动画
        clearInterval(timer)
    }
    oDiv.style.left = oDiv.offsetLeft + 1 + 'px'
}, 50)

动画函数给不同元素记录不同的定时器

如果多个元素都使用这个动画函数，每次都要var声明这个定时器，我们可以给不同的元素声明不同的定时器（自己专门用自己的定时器）

原理：我们可以很方便的给当前的对象添加属性

// 动画函数封装
/* 
       目标对象 obj  target目标位置  time毫秒值
      */
//  给不同的元素指定不同的定时器

function animate(obj, target, time) {
    // 当我们不断的点击按钮，元素的速度会越来越快，因为开启了太多的定时器
    // 解决方案 让元素只有一个定时器执行
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
            // 停止定时器  停止动画
            clearInterval(obj.timer)
        }
        obj.style.left = obj.offsetLeft + 1 + 'px'
    }, time)
}

var oBtn = document.querySelector('button')
var oDiv = document.querySelector('div')
oBtn.onclick = function () {
    animate(oDiv, 500, 30)
}

缓动动画：

实现原理

缓动动画就是让元素运动速度有所变化，最常见的就是让速度慢慢停下来

步骤:

让盒子每次移动的距离慢慢变小，速度就会慢慢停下来
核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
停止条件，让当前盒子位置等于目标位置就停止定时器
步长值要取整

/* 
      - 让盒子每次移动的距离慢慢变小，速度就会慢慢停下来
- 核心算法：（目标值-现在的位置）/10  作为每次移动的距离步长
- 停止条件，让当前盒子位置等于目标位置就停止定时器
- 步长值要取整
      */

function animate(obj, target) {
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {
        // 步长  要写到定时器里面
        var step = (target - obj.offsetLeft) / 10

        if (obj.offsetLeft === target) {
            // 停止条件，让当前盒子位置等于目标位置就停止定时器
            clearInterval(obj.timer)
        }

        // 把每次加1   这个步长值改为一个慢慢变小的值  （目标值-现在的位置）/10
        obj.style.left = obj.offsetLeft + step + 'px'
    }, 30)
}

var oBtn = document.querySelector('button')
var oDiv = document.querySelector('div')
oBtn.addEventListener('click', function () {
    animate(oDiv, 500)
})

// 匀速动画  盒子当前的位置 + 固定的值 1px
// 缓动动画  盒子当前的位置 + 变化的值 (目标值 - 现在的位置) /10

动画函数多个目标值之间移动：

可以让动画函数从800移动到500，还可以从500 移动到800

步长可能是正值也可能负值

是正值，步长就往大取整
是负值，步长就向小了取整

function animate(obj, target) {
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {
        // 步长  要写到定时器里面
        var step = (target - obj.offsetLeft) / 10
        // 步长可能是正值 也可能是负值   把步长值改为整数  不出现小数问题
        // 正值 步长就往大取整  负值 步长就往小取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        console.log(step)

        if (obj.offsetLeft === target) {
            // 停止条件，让当前盒子位置等于目标位置就停止定时器
            clearInterval(obj.timer)
        }

        // 把每次加1   这个步长值改为一个慢慢变小的值  （目标值-现在的位置）/10
        obj.style.left = obj.offsetLeft + step + 'px'
    }, 30)
}

var oBtn = document.querySelectorAll('button')
var oDiv = document.querySelector('div')
oBtn[0].addEventListener('click', function () {
    animate(oDiv, 800)
})

oBtn[1].addEventListener('click', function () {
    animate(oDiv, 500)
})

动画函数添加回调函数：

回调函数，函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调

回调函数写的位置，定时器结束的位置

function animate(obj, target, callback) {
    // callback=function(){}
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {
        // 步长  要写到定时器里面
        var step = (target - obj.offsetLeft) / 10
        // 步长可能是正值 也可能是负值   把步长值改为整数  不出现小数问题
        // 正值 步长就往大取整  负值 步长就往小取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        console.log(step)

        if (obj.offsetLeft === target) {
            // 停止条件，让当前盒子位置等于目标位置就停止定时器
            clearInterval(obj.timer)

            // 动画结束之后我们要做一些操作
            // 定时器结束后  使用回调函数
            if (callback) {
                // 调用函数
                callback()
            }
        }
        // 把每次加1   这个步长值改为一个慢慢变小的值  （目标值-现在的位置）/10
        obj.style.left = obj.offsetLeft + step + 'px'
    }, 30)
}

var oBtn = document.querySelectorAll('button')
var oDiv = document.querySelector('div')
oBtn[0].addEventListener('click', function () {
    animate(oDiv, 800, function () {
        alert(123)
    })
})

oBtn[1].addEventListener('click', function () {
    animate(oDiv, 500, function () {
        alert(234)
    })
})

网页轮播图：

步骤:

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
图片播放的同时，下面小圆圈模块跟随一起变化
点击小圆圈，可以播放相应的图片
鼠标不经过轮播图，轮播图也会自动播放图片
鼠标经过，轮播图自动播放停止

节流阀：

防止轮播图按钮连续点击造成播放过快

目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续播放

思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

var flag = true

if(flag){
    flag =false    关闭
    do something
}

//动画执行完毕  flag = true  解锁

返回顶部：

带有动画的返回顶部
动画封装函数
把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了
页面滚动了多少，可以通过window.pageYOffset
最后页面滚动使用window.scroll(x,y)

移动端：

触屏事件：

触屏事件概述：

移动端浏览器兼容性较好，我们不需要考虑js的兼容性问题，可以放心使用原生js书写效果，移动端有自己独特的地方。比如触屏touch(触摸事件)，Android和ios都有。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指对屏幕或者触控板的操作

常见的触屏touch事件:

touchstart   手指触摸到一个Dom元素时触发
touchmove    手指在一个DOM元素上滑动时触发
touchend      手指从一个DOM元素上移开时触发当我们手指离开屏幕的时候，就没有了touches和targettouches

触摸事件对象(TouchEvent)：

TouchEvent是一个描述手指在触摸平面的状态变化的事件，这类事件用于描述一个或多个触摸点，使开发者可以检查触点的移动，触点的增加和减少.

touchstart,touchmove,touchend三个事件都有各自的事件对象

三个常见对象：

touches    正在触摸屏幕的所有手指的一个列表
targetTouches  正在触摸当前DOM元素上的手指的一个列表  【重点】
changedTouches  手指状态发生了改变的列表，从无到有，从有到无变化

移动端拖动元素：

touchstart,touchmove,touchend可以实现拖动元素

但是拖动元素需要当前手指的坐标值，我们可以使用targetTouches[0]里面pageX和pageY

移动端拖动的原理:手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离

手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三步骤：

触摸元素touchstart，获取手指初始坐标，同时获得盒子原来的位置
移动手指 touchmove 计算手指的滑动距离，并且移动盒子
离开手指 touchend

**注意:**手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault()

classList属性：

classList属性是HTML5新增的一个属性，返回元素的类名，但是ie10以上版本支持

该属性用于在元素中添加，移除以及切换css类

注意:一下方法里面，所有类名都不带点

添加类：

element.classList.add('类名')

移除类：

element.classList.remove('类名')

切换类：

element.classList.toggle('类名')

JavaScript高级：

构造函数和原型：

对象的三种创建方式：

字面量：

var obj = {}

new关键字：

var obj=new Object()

构造函数：

function Person(){
    this.name="zs"
    this.age =12
}
var p = new Person()

构造函数存在问题：

 <script>
      function Student(name, age, score) {
        this.name = name
        this.age = age
        this.score = score
        this.study = function () {
          console.log('好好学习')
        }
      }
      var s1 = new Student('zs', 12, 100)
      var s2 = new Student('ls', 34, 89)
      // 每创建一个对象，就会生成一个新的函数 存在浪费内存问题

      // 所有的对象使用同一个函数，这样就节省了内存，怎么做呢？
    </script>

构造函数原型 prototype：

构造函数通过原型分配的函数是所有对象共享的

JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象，这个prototype属性就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有

我们可以把哪些不变的方法，直接定义在prototype对象上，这样所有的对象实例就可以共享这些方法

每一个实例对象都可以访问它构造函数的原型对象中的成员

/* 
      实例成员 就是构造函数内部 通过this添加的成员uname  age sing
    */

function Star(uname, age) {
    this.uname = uname
    this.age = age
    // this.sing = function () {
    //   console.log('我会唱歌')
    // }
}

// console.log(Star.prototype)

// 动态的方式给原型对象添加成员

Star.prototype.sing = function () {
    console.log('我会唱歌')
}

// 实例化对象   new创建的对象就是一个实例对象
var ldh = new Star('刘德华', 18) // 实例成员只能通过实例化的对象来访问
console.log(ldh.uname)
console.log(ldh.age)
ldh.sing()
var zxy = new Star('张学友', 28)
zxy.sing()
// 一般情况下 我们把公共的属性定义到构造函数里面 公共的方法放到原型对象上

对象原型：

实例对象都会有一个属性__proto__    指向构造函数的prototype原型对象 
之所以我们对象可以使用构造函数prototype 原型对象的属性和方法，就是因为对象有__proto__属性的存在

__proto__ 对象原型 和原型对象prototype 是等价的
__proto__ 对象原型的意义 在于为对象的查找机制提供了一个方向，或者说是一条路线，__proto__是一个非标准属性

在开发过程中，不可以使用这个属性__proto__,它只是内部指向原型对象prototype

constructor构造函数：

对象原型(__proto__)和构造函数(prototype)原型对象里面都有一个属性，constructor属性我们称为构造函数
因为它指回构造函数本身

constructor 主要用于记录该对象引用于那个构造函数，它可以让原型对象重新指向原来的构造函数
一般情况下，对象的方法都在构造函数的原型对象中设置，如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor 就不再指向当前构造函数了，
此时，我们可以再修改后的原型对象中，添加一个constructor指向原来的构造函数

原型链：

每一个实例对象有一个 __proto__属性，指向构造函数的原型对象，
构造函数的原型对象，也是一个对象  这样一层一层往上找 就形成了原型链

在这里插入图片描述

注意：star和person都是自定义的

原型对象中this的指向：

构造函数中的this和原型对象的this ，都指向我们new出来的实例对象

function Star(uname, age) {
    this.uname = uname
    this.age = age
}

var that
Star.prototype.sing = function () {
    console.log('我会唱歌')
    that = this
}

var ldh = new Star('刘德华', 23)
// 1 在构造函数中，里面的this指向的是对象实例 ldh

ldh.sing()
console.log(that === ldh) //true

// 原型对象函数里面的this  指向的是实例对象 ldh

扩展内置对象：

var arr = new Array()
arr = [3, 5, 6, 43, 22]

// arr.sum(1)

// console.log(arr)
// 扩展内置方法
Array.prototype.sum = function () {
    var sum = 0
    for (var i = 0; i < this.length; i++) {
        sum += this[i]
    }
    return sum
}
// console.log(arr)
console.log(arr.sum())

this指向：

this指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁

全局作用域或者普通函数中this指向全局对象window，
定时器里面的this也是指向window
方法调用中谁调用this this指向谁
构造函数中this指向构造函数实例

var a = 10
function fn() {
    console.log(123)
    console.log(this)
}

window.fn() //this指向window

window.setTimeout(function () {
    console.log(this, 'settimeout') //window
}, 1000)

btn.onclick = fn // 函数的调用者  <button id="btn">按钮</button>

function Fun() {
    this.name = 'zs'
    console.log(this) //this指向 Fun的实例对象
}
var f = new Fun()

var o = {
    sayHi: function () {
        console.log(this, 'o') //o这个对象
    },
}
o.sayHi()

// console.log(window)

call：

call可以调用函数

call可以修改this的指向，使用call的时候，参数一是修改后的this指向，参数2，参数3… 使用逗号隔开链接

// call方法
function fn(x, y) {
    console.log('我想喝牛奶')
    console.log(this)
    console.log(x + y)
}
var o = {
    name: 'lucy',
}

// fn()  //window
// call() 可以调用函数
// fn.call()
// call 可以改变这个函数的this指向，此时这个函数的this  就指向了o这个对象
fn.call(o, 2, 4)

继承：

子构造函数继承父构造函数中的属性

先定义子构造函数
再定义父构造函数
子构造函数继承父构造函数的属性(call方法)

// 子构造函数继承父构造函数中的属性
// 1 父构造函数
function Father(uname, age) {
    // this指向父构造函数中的实例对象
    this.uname = uname
    this.age = age
}

// 2 子构造函数
function Son(uname, age, score) {
    // this指向子构造函数实例对象
    Father.call(this, uname, age)
    this.score = score
}

var s = new Son('刘德华', 12, 100)
console.log(s)

借用原型对象继承方法：

// 1 父构造函数
function Father(uname, age) {
    // this指向父构造函数中的实例对象
    this.uname = uname
    this.age = age
}

Father.prototype.money = function () {
    console.log(10000)
}

// 2 子构造函数
function Son(uname, age, score) {
    // this指向子构造函数实例对象
    Father.call(this, uname, age)
    this.score = score
}

// 直接赋值对象会有问题，constructor改变了
Son.prototype = new Father()
// 利用对象的形式 修改了原型对象，要把constructor指回原来的构造函数
Son.prototype.contructor = Son

Son.prototype.exam = function () {
    console.log('考试了')
}

var s = new Son('liu', 18, 100)
console.log(s)

ES5新增的方法：

forEach遍历数组：

var arr = [1, 2, 3]
      var sum = 0
      // for (var i = 0; i < arr.length; i++) {
      //   sum += arr[i]
      // }
      arr.forEach(function (value, index, array) {
        console.log('每个数组元素' + value)
        console.log('每个数组元素索引号' + index)
        console.log('数组本身', array)
        sum += value
      })

filter过滤数组：

var arr = [12, 34, 4, 88, 2, 3, 4, 56, 16]
      // 过滤数组中值大于20的值
      // var newArr = []
      // for (var i = 0; i < arr.length; i++) {
      //   if (arr[i] > 20) {
      //     newArr.push(arr[i])
      //   }
      // }
      // console.log(newArr)
      //  返回一个数组  数组中存放的是满足条件的元素
      var newArr = arr.filter(function (value, index) {
        return value > 20
      })
      console.log(newArr)

some：

查找数组中是否有满足添加的元素

  var arr = [12, 34, 4, 88, 2, 3, 4, 56, 16]
      // var flag = false //假如 没有满足条件的元素
      // for (var i = 0; i < arr.length; i++) {
      //   if (arr[i] <= 20) {
      //     flag = true
      //     break
      //   }
      // }
      // console.log(flag) //值为false 没有小于20的元素  为true  有小于20的元素

      var flag = arr.some(function (value) {
        console.log(value)
        return value <= 20
      })
      console.log(flag)

      /* 
      
      filter 查找满足条件的元素 返回的是一个数组 是把所有满足条件的元素返回回来
      some 查找满足条件的元素是否存在 返回的是一个布尔值  如果查找到第一个满足条件的元素就终止循环
      */

trim方法去除字符串两边的空格：

// trim去除两端的空格
var str = '   hello     '
console.log(str.trim())
var str1 = '    h   e ll  o  '
console.log(str1.trim())

获取对象的属性：

Object .keys获取当前对象中的属性名，返回值是一个数组

// 用于获取对象自身的所有属性
var obj = {
    id: 1,
    name: '牛牛',
    price: 1000,
    num: 200,
}

var arr = Object.keys(obj)
console.log(arr)

Object.defineproperty：

Object.defineproperty设置或者修改对象中的属性

// Object.defineproperty设置或者修改对象中的属性
var obj = {
    id: 1,
    name: '小米手机',
    price: 1999,
}
// 以前给对象添加或修改属性的方法
// obj.num = 1000
// obj.price = 99
// console.log(obj)

// Object.defineproperty定义新属性
Object.defineProperty(obj, 'num', {
    value: 1200,
    // 允许遍历  如果值为false 不允许遍历
    enumerable: true,
})
// console.log(obj)
// 修改属性
Object.defineProperty(obj, 'price', {
    value: 9.9,
})
// console.log(obj)

Object.defineProperty(obj, 'id', {
    // 值为false 不允许修改这个属性值  默认值为false
    writable: false,
})
obj.id = 2
// console.log(obj)

Object.defineProperty(obj, 'address', {
    value: '北京昌平',
    // 值为false 不允许修改这个属性值  默认值为false
    writable: false,
    // 允许遍历  如果值为false 不允许遍历  默认值为false  不遍历当前的属性

    enumerable: false,
    // 如果为false 不允许删除当前这个属性 不允许再修改第三个参数里面的特性  默认为false
    configurable: false,
})

console.log(obj)
console.log(Object.keys(obj))
delete obj.address
console.log(obj)
delete obj.name
console.log(obj)

面向过程：

面向过程是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就行了

面向对象：

面向对象是把事务分解成一个一个对象，然后由对象之间分工与合作

面向过程： 不易维护，不易复用
面向对象:  易维护，易复用，面向对象有封装，继承，多态的特性，使系统更加灵活

类：

在ES6中新增加了类的概念，可以用class关键字声明一个类，之后用这个类来实例化对象，类抽象了对象的公共部分，指某一大类对象，通过实例化一个具体的对象

类是构造函数的语法糖(简写)

创建类：

//  1 使用class关键字  class 类名{}
class Star {}

// 2使用定义的类创建实例  使用new关键字
var s = new Star()

代码

// //  1 使用class关键字  class 类名{}
// class Star {}

// // 2使用定义的类创建实例  使用new关键字
// var s = new Star()

// 创建类   创建一个明星类
class Star {
    // 类的共有属性放到 constructor
    // 类实例化对象时候执行constructor
    // constructor 是构造器 或者构造函数
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

var ldh = new Star('刘德华', 18)
console.log(ldh)

// 结果 类创建的对象 和构造函数创建对象的结果是一样的

类中添加方法：

// 创建类   创建一个明星类
class Star {
    // 类的共有属性放到 constructor
    // 类实例化对象时候执行constructor
    // constructor 是构造器 或者构造函数
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    // ---类里面所有的函数不需要写function
    // ----多个函数之间不需要添加逗号分割
    sing(song) {
        console.log(this.name + song)
    }
}

var ldh = new Star('刘德华', 18)
var zxy = new Star('张学友', 20)
// console.log(ldh)

ldh.sing('冰雨')
zxy.sing('李香兰')

// 结果 类创建的对象 和构造函数创建对象的结果是一样的

总结

通过class关键字创建类，类名的首字母要大写
类里面有个constructor函数，可以接收传递过来的参数，返回实例对象
constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
多个函数之间不需要用逗号分割
生成实例new 不能省略
创建类，类名后面不能加小括号，生成实例，类名后面加小括号，类里面的函数不需要加function

类的继承：

class Father{
    //父类
}
class Son extends Father{ 
  //子类继承父类
}

// super 关键字调用父类普通函数
// class Father {
//   constructor(x, y) {
//     this.x = x
//     this.y = y
//   }
//   say() {
//     return '我是爸爸'
//   }
// }

// class Son extends Father {
//   say(x, y) {
//     // super(x, y) //调用了父类中的普通函数
//     console.log('我是儿子')
//     console.log(super.say() + '的儿子')
//   }
// }

// var son = new Son()
// son.say()
// 继承中属性或者方法的查找原则  就近原则
// 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
// 继承中，子类没有，就去查找父类有没有这个方法，如果有就去执行父类的方法

// 如果子类想要继承父类的方法，同时在自己内部扩展自己的方法，利用super调用父类的构造函数，必须在
// 子类this之前调用

class Father {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    say() {
        console.log('我是爸爸')
        return '我是爸爸'
    }
}

class Son extends Father {
    constructor(x, y) {
        super(x, y)
    }
    // say() {
    //   console.log('say')
    // }
}
var s = new Son(34, 4)
s.say()

// this指向问题  类里面共有的属性和方法 一定要加this使用
// 1constructor中的this指向new出来的实例对象
// 2 自定义方法 一般也指向new出来的实例对象

改变函数内this指向：

call：

call调用函数，可以简单理解成调用函数的方式，可以改变函数内的this指向

场景：做继承

var o = {
    name: 'lucy',
}
function fn(a, b) {
    console.log(this)
    console.log(a + b)
}
// call第一可以调用函数  第二可以改变this指向
fn.call(o, 2, 4)

function Father(name, age, sex) {
    this.name = name
    this.age = age
    this.sex = sex
}

function Son(name, age, sex) {
    Father.call(this, name, age, sex)
}
var son = new Son('ldh', 45, '男')
console.log(son)

apply：

apply方法调用一个函数，可以简单理解成调用函数的方式，可以改变函数内的this指向

场景：跟数组有关系

/* 
   apply  应用的意思
    */
var o = {
    name: 'lucy',
}
function fn(arr, arr1, arr2) {
    console.log(this)
    console.log(arr, arr1, arr2) //1,2,3
}
fn.apply(o, [1, 2, 3])

/* 
      可以调用函数  还可以改变this指向
      它的参数必须是数组(伪数组)
      apply的主要应用，可以使用apply借助于数学内置对象求数组最大值
      Math.max()
      */
var arr = [1, 33, 55, 34, 23, 12]
var arr1 = ['red', 'pink']
var max = Math.max.apply(Math, arr) //Math.max(1, 33, 55, 34, 23, 12)
// var max = Math.max(34, 23, 45, 23)
console.log(max)
var min = Math.min.apply(Math, arr)
console.log(min)

bind：

bind方法不会调用函数，但是能改变函数内this指向，返回的是原函数改变this之后产生的新函数

如果只是想改变this指向，并且不想调用这个函数可以使用bind

场景：不调用函数可以改变this指向

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
    /* 
  bind 绑定 捆绑意思
    */
    var o = {
        name: 'lucy',
    }
function fn(a, b) {
    console.log(this)
    console.log(a + b)
}

var f = fn.bind(o, 34, 3)
// console.log(f)
f()

/* 
          不会调用原来的函数，但是可以改变函数内部this指向
          返回的是原函数改变this之后产生的新函数

      */

// 有一个按钮，我们点击了按钮，禁用了按钮，3秒后要开启按钮

var btnArr = document.querySelectorAll('button')
for (var i = 0; i < btnArr.length; i++) {
    btnArr[i].onclick = function () {
        this.disabled = true
        setTimeout(
            function () {
                this.disabled = false
            }.bind(this),
            3000
        )
    }
}

闭包：

作用域复习：

变量根据作用域的不同分为两种：全局变量局部变量

函数内部可以使用全局变量

函数外部不可以使用局部变量

函数执行完毕，本作用域内的局部变量会销毁

什么是闭包：

闭包是有权访问另一个函数作用域中变量的函数，简单理解就是一个作用域可以访问另外一个函数内部的局部变量

特性：

变量或者参数不会被垃圾回收机制回收

函数套函数

内部函数可以直接访问外部函数的内部变量或者参数

优点：

变量长期驻扎在内存中

避免了全局变量污染

缺点：

常驻内存，增大了内存的使用量，使用不当会造成内存泄漏

// 闭包是有权访问另一个函数作用域中变量的函数
// 我们fun这个函数作用域，访问了另外一个函数fn里面的局部变量 num

function fn() {
    //fn是闭包函数
    var num = 10
    function fun() {
        console.log(num) //10
    }
    fun()
}
fn()

闭包的作用：

延伸了变量的作用范围

// 闭包的作用
// 闭包是有权访问另一个函数作用域中变量的函数**，简单理解就是一个作用域可以访问另外一个函数内部的局部变量
// 我们fn  外面的作用域可以访问fn内部的局部变量
// 作用：延伸了变量的作用范围

function fn() {
    var num = 10
    function fun() {
        console.log(num)
    }
    return fun
}

var f = fn()
f()

// 类似于

// var f = function(){
//   console.log(num)
// }

递归：

什么是递归：

函数内部自己调用自己，该函数就是递归函数

必须有结束条件

拷贝：

浅拷贝：

// 浅拷贝 ：只拷贝一层，更深层次对象级别的只拷贝引用
// 深拷贝   拷贝多层 每一级别的数据都会拷贝

var obj = {
    id:1,
    name:"andy",
    msg:{
        age:18
    }
}
var o ={}

// 第一种
// for(var k in obj){
//     // k 属性名  obj[k] 属性值
//     o[k] = obj[k]
// }
// console.log(o)
// o.msg.age =23
// console.log(obj)

// 第二种  合并对象Object.assign(target,source1,source2)
// target 目标对象  source1，source2 若干个源对象
// 实行的是浅拷贝

// var obj1 = {}
// var a ={a:1}
// var b={b:2}
// console.log(Object.assign(obj1,a,b))
// console.log(obj1)  //{a:1,b:2}

var obj1 = {a:{b:1}}
var obj2= Object.assign({},obj1)
obj1.a.b=3
console.log(obj2.a.b)

深拷贝：

第一种：

// 拷贝多层 每一级别的数据都会拷贝
var obj = {
    id:1,
    name:"andy",
    msg:{
        age:18
    },
    colors:['pink','red']
}
var o ={}

// 封装函数
function deepCopy(newobj,oldobj){
    for(var k in oldobj){
        // 判断我们的属性值属于那种数据类型
        var item=oldobj[k]
        // 判断这个值是否是数组
        if(item instanceof Array){
            newobj[k]=[]
            deepCopy(newobj[k],item)
        }else if(item instanceof Object){
            //判断是否为对象
             newobj[k]={}
             deepCopy(newobj[k],item)
        }else{
            // 属于简单数据类型
            newobj[k] = item
        }
    }
}


deepCopy(o,obj)
o.msg.age =89
console.log(obj,o)

第二种：

var obj = {
    id: 1,
    name: 'zs',
    msg: {
        age: 12,
    },
    colors: ['pink', 'red'],
}
// 深拷贝的第二种
var o = JSON.parse(JSON.stringify(obj))
o.msg.age = 9

console.log(obj)

json数据：

json是存储数据的一种格式
Javascript Object Notation（JavaScript对象表示法）

json是存储和交换文本信息的语法，类似XML，JSON比XML更小，更快更易解析

什么是json：

JSON是轻量级的文本数据交换格式
JSON是对立与语言，使用JavaScript语法来描述数据对象
JSON解析器和JSON库支持许多不同的编程语言

为什么使用json：

对应AJAX应用程序，更快更易使用

使用json 读取json字符串处理json字符串

语法规则：

json语法是JavaScript对象表示语法的子集

数据在名称/值中，
数据由逗号分割
大括号保存对象
中括号[] 保存数组，数组可以包含多个对象

//写在双引号中   

key:value
"name":"zs"

JSON值可以是：数字(整数或浮点型)，字符串，布尔值，数组，对象，null

json文件的文件类型是.json

json文本的MIME类型是application/json

转换：

JSON.parse(str) 把json字符串转换为json对象

JSON.stringify(jsonObj) 把对象转换为字符串

本地存储：

为了满足我们各种各样的需求，会经常性的在本地存储大量的数据，HTML5规范提出了相关的解决方案

特性：

数据存储在用户浏览器中
设置、读取方便，页面刷新不丢失数据
容量较大，sessionStorage大约5M，localStorage大约20M
**只能存储字符串，**可以将对象JSON.stringify编码后存储

window.sessionStorage：

生命周期为关闭浏览器窗口
在同一个窗口 (页面)下数据可以共享
以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key,value)

读取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：

sessionStorage.clear()

window.localStorage：

生命周期永久生效，除非手动删除，否则关闭页面也会存在
可以多窗口（页面）共享(同一浏览器可以共享)
以键值对的形式存储使用

存储数据：

localStorage.setItem(key,value)

读取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

清空数据：

localStorage.clear()

小刘私坊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记三

移动端浏览器兼容性较好，我们不需要考虑js的兼容性问题，可以放心使用原生js书写效果，移动端有自己独特的地方。比如触屏touch(触摸事件)，Android和ios都有。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指对屏幕或者触控板的操作通过class关键字创建类，类名的首字母要大写类里面有个constructor函数，可以接收传递过来的参数，返回实例对象。
复制链接

扫一扫