三.javascript部分(1)

最新推荐文章于 2024-10-01 20:12:28 发布

棽墨

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量138

点赞数

分类专栏：前端学习文章标签： javascript jquery vue.js html html5

本文链接：https://blog.csdn.net/weixin_43842189/article/details/112384087

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这部分呢内容有点多所以我把它分成两部分，这里面涉及很多js高级程序设计知识点，建议看不懂的同学们不妨看个视频学一学，本人的话也是看了好多博客，加上看Java高级程序这本书，但是学习效果不佳，然后刷到了一个讲原型链的视频，感觉深入浅出，然后顺便就把其他诸如执行上下文，作用域链，闭包，面向对象，继承等通通一下子看完了，神清气爽，舒服得很。本来我是youtube看的视频，然后从哔哩哔哩上找了一下，发现也有，链接如下：

https://www.bilibili.com/video/BV1Ns411V7g5www.bilibili.com

1.innerHTML和innerText

innerText只会取文本
innerHTML会把标签什么的都取出来

2.slice和splice

slice是复制选定的部分，不会影响原数组
splice是剪切一部分，会影响原数组

3Javascript基本类型和引用类型的存储区别

基本类型储存在栈中，但是一旦被闭包引用则成为常住内存，会储存在内存堆中。

复杂类型会储存在内存堆中

4什么是变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部

5作用域链

6.函数的四种调用方式

对象调用方式（Array.prototype.slice()）
构造调用方式（new+函数调用）
直接调用方式（相当于window对象调用）
借用调用方式（apply和call）都可以改变调用函数方法的对象，但是传入参数形式不一样，第一个参数都是要调用函数方法的对象，apply第二个参数是一个参数数组，call是将参数挨个传入

7call apply bind

手写call函数

思路：

给绑定对象添加一个fn = this 此时this就是要执行的方法
执行这个方法，传入参数，并返回得到的值

实现：

Function.prototype.myCall = function(context, ...args) {
    context.fn = this
    let res = context.fn(...args)
    delete context.fn
    return res
}

手写apply函数

思路：

改变this 同call
执行这个方法，注意参数，数组

实现：

Function.prototype.myApply = function(context, args) {
    context.fn = this
    let res = context.fn(...args)
    delete context.fn
    return res
}

手写bind函数

思路：

先把this，也就是这个方法，用变量保存起来
为了不分参数是不是数组，直接拍平flat
因为bind返回一个函数F，这个F函数有可能被new 所以判断一下F函数的this即可知道是否被new
如果被new 就把不要改变this了
如果没有被new 就使用apply执行，注意返回的函数F也有参数，用ES6的扩散操作符弄一下参数
把F函数的prototype变成原方法的实例

实现：

Function.prototype.myBind = function (context, ...args) {
    const self = this
    args = args.flat()
    const F = function () {
        return self.apply(this instanceof F ? this : context, [...args, ...arguments])
    }
    F.prototype = Object.create(this)
    return F
}