Javscript 基础

Javascript 中的this指针(通过function定义的函数中的this指针是动态绑定的,谁调用该函数,this就指向谁)

  1. 直接定义函数,并且通过函数名调用,则函数体中的this指针为window对象,就算函数是在另外一个函数中定义的
  2. DOM元素绑定事件,回调函数中的this指向DOM元素
  3. 通过new FunctionName(args)创建对象,FunctionName函数体中的this指向实例对象
  4. 通过FunctionName.prototype.func = function(){},函数中的this指向实例对象

修改Javascript中的this指针

  1. 定义一个函数对象,默认this指向window,调用该函数对象的bind函数,绑定参数,第一个传入的就是函数中this应该绑定哪个对象,这样就可以修改了。Fn.bind(obj)则fn中的this就是obj了,fn.bind(obj)会返回新的函数对象,所以应该let newFn = Fn.bind(obj)
  2. 在函数执行的使用,不直接通过函数名加上括号调用,而是使用Fn.call(args), 传入参数调用,第一个参数就是this的值,可以指定成我们期望的obj
  3. Fn.apply(obj, […])功能和Fn.call一样,只不过传递参数的方式不同,第一个参数为this,第二个参数为数组,数据中写入Fn正常调用时的实参

Javascript中的ES5类实现

<script>

    (function() {

        function Animal(name, age) {

            if (new.target === Animal) {

                throw new Error('Abstract class can not be constructed!')

            }

            this.name = name

            this.age = age

        }

        Animal.prototype.say = function() {

            console.log('say something')

        }

        function Dog(name, age) {

            Animal.call(this, name, age)

        }

// 类通过prototype对象实现继承

// prototype对象中存放方法,还有一个 __proto__ 对象指向父类的 prototype 对象

// 依次类推, Object.prototype.__proto__ 是 null

// dog.say() 调用过程, 查看 dog.__proto__ 对象中是否有 say 函数(其中 dog.__proto__ === Dog.prototype), 如果有就调用,如果没有则看 dog.__proto__.__proto__ 中是否有,依次查找

        Dog.prototype.__proto__ = Animal.prototype

        Dog.prototype.say = function() {

            console.log('Woof!')

        }

        let dog = new Dog('Lily', 1)

        console.log(dog)

        dog.say()

    })()

</script>

javascript网页上的模块化实现

<script>

    // 使用立即执行函数实现局部作用域

    (function() {

        function Animal(name, age) {

            if (new.target === Animal) {

                throw new Error('Abstract class can not be constructed!')

            }

            this.name = name

            this.age = age

        }

        Animal.prototype.say = function() {

            console.log('say something')

        }

        function Dog(name, age) {

            Animal.call(this, name, age)

        }

        Dog.prototype.__proto__ = Animal.prototype

        Dog.prototype.say = function() {

            console.log('Woof!')

        }

        // 使用 window.Xxx = xxx 导出模块到全局作用域中

        window.Animal = Animal

        window.Dog = Dog

    })()

</script>

javascript规范

  1. Commonjs: NodeJs 社区, 同步
  2. Amd: 异步
  3. Es6

Babel

  1. 作用:将ES6的语法转为ES5的语法
  2. 安装:`npm install -g babel-cli && npm install -D babel-preset-es2015`
    1. Babel-cli 是命令行工具
    2. Babel-preset-es2015 是 es5 到 es6 转换的映射工具
  3. 配置文件:`.babelrc`
    1. 内容

{

    "presets": "es2015",

    "plugins": []

}

文件读取

  1. `let reader = new FileReader()`
  2. `reader.readAsDataURL(path)` 读取二进制文件,以base64方式返回,因为异步
  3. `reader.onload = function(){reader.result}`得到结果
  4. 应用
    1. 用户在浏览器上选择某一张图片时,input的type为file会触发onchange事件,这个时候可以再回调函数中进行文件读取,将结果作为预览图进行显示

Ajax原理

  1. `let xhr = new XMLHttpRequest()`
  2. `xhr.open('get', url)`
  3. `xhr.send()`
  4. `xhr.onload = callback` 接受服务器端响应数据完毕触发
  5. `xhr.onerror = callback` 网络中断触发
  6. `xhr获取的响应数据是字符串,如果字符串是json形式的,使用JSON.parse()转为对象`
  7. 如果要POST 请求
    1. `xhr.setRequestHeader('Content-Type', 'applicatoin/x-www-form-urlencoded')` type也可以是`application/json`
    2. `xhr.send('name=abc&age=22')`或者`xhr.send(JSON.stringnify({name: 'abc', age: 22}))`
  8. `xhr.status`获取http状态码
  9. `xhr.readyState` 表示xhr 对象状态,如果值为4 ,表示获取服务器端数据完毕
    1. 可以通过`xhr.onreadystatechange = callback`处理数据
  10. 跨域情况
    1. 涉及到跨域问题时,cookie是不发送的,前端的ajax对象需要设置withCredentials=true,而服务器端也设置响应为Access-Control-Allow-Credentials: true
  1. JSONP 实现跨域
    1. JSONP利用的就是<script>标签中src可以进行跨域实现的,通过src发送GET请求,src得到服务端响应之后,会立即执行响应回来的javascript代码
    2. 服务器端返回的必须是一个函数调用,发送给客户端的数据作为函数的参数,例如`res.send('fn({a: "a", b: "b"})')`
    3. 每当要发送跨域的ajax请求时,通过API动态创建script标签,并将标签追加到页面中即可,处理完请求之后(也就是script.onload执行),再将script标签删除`document.body.removeChild(this)`
    4. 使用JSONP进行跨域,发送的请求一般格式为`http://ip:port/path?callback=funcName`
    5. 一般采用jsonp函数对jsonp请求进行封装

FormData对象,可以实现二进制文件上传

  1. `formData.get(key)`
  2. `formData.set(key, value)`
  3. `formData.delete(key)`删除某个field
  4. `formData.append(key, value)`追加filed
  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p style="font-size:16px;"> <span style="color:#7030A0;"><strong>本课程为 <span style="color:#FFFF00;background-color:#FF0000;">2020年</span> 新版</strong></span><span style="color:#7030A0;"><strong>录制,非常适合初学者的JavaScript视频课程,全面讲解<span style="color:#FFFF00;background-color:#FF0000;">JavaScript技术</span>,一站式学习,让你少走弯路,直达技术前沿!</strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="color:#FFFF00;background-color:#FF0000;font-size:20px;"><strong><span>以通俗易懂的方式全面讲解JavaScript技术,以知识讲解+实战案例的方式帮您快速入</span></strong><strong><span>门!</span></strong></span> </p> <p style="font-size:16px;"> <span style="color:#FF0000;font-size:18px;"><br /> </span> </p> <p style="font-size:16px;"> <strong><span style="font-size:18px;">课程内容包括:</span></strong> </p> <p style="font-size:16px;"> <span style="font-size:18px;">1.JavaScript简介</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">2.<span style="color:#313D54;">JavaScript基本用法</span></span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">3.变量和数据类型</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">4.运算符</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">5.数据类型转换</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">6.选择结构、循环结构</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">7.数组、函数</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">8.Debug调试</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">9.DOM操作</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">10.事件处理</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">11.BOM操作</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">12.自定义对象</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">13.原型prototype</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">14.内置对象</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">15.客户端存储Cookie、WebStorage</span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><span style="color:#FF0000;"></span></strong><strong><span style="color:#FF0000;">教学全程采用<span style="font-size:20px;color:#00B050;">笔记+代码案例</span>的形式讲解,每个知识点都有详细的讲解,通俗易懂!!!</span></strong></span> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090258436919.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259007133.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259114218.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259291679.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259474844.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259582372.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;font-size:24px;"><strong>全网500万学员的选择,好评如潮,专业更值得信赖......</strong></span> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;"><strong><img src="https://img-bss.csdnimg.cn/202008090300125864.jpg" alt="" /><br /> </strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><strong><strong>讲师介绍</strong></strong></strong></span> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><strong><strong><img src="https://img-bss.csdnimg.cn/202008090303376757.jpg" alt="" /><br /> </strong></strong></strong></span> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;"><strong><br /> </strong></span> </p>
相关推荐
<p style="color:#666666;"> JavaScript是一种网页交互语言,为网页增添了巨大的表现力和交互能力,极大提高了用户体验,如今很难在找到不使用JavaScript的网站了。本课程主要是为刚刚接触JavaScript的朋友准备,详细的讲解了JavaScript的基本语法,以及事件的处理操作。 </p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> 本季课程为JavaScript基础语法篇,着重介绍了JavaScript脚本语言的基础语法部分<br /> 内容包含:<br /> ◆ 认识JavaScript脚本语言、发展史、编译工具<br /> ◆ JavaScript中的变量、数据类型、类型转换<br /> ◆ 条件选择(if--else, if--else if ,switch--case)<br /> ◆ 循环(while循环, do--while循环, for循环,循环嵌套 )<br /> ◆ 集合(Array基础常见操作、案例演示)<br /> ◆ set集合、map集合(集合的遍历、集合常用的方法)<br /> ◆ 课后习题 </p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> 在本季课程的讲解部分结合了大量的案例演示,通过案例演示可以清楚的加深对JavaScript基本语言的理解; 建议在学习的过程中,一定要动手实战,这样才能真正的领悟到JavaScript的语法细节。 </p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> <span style="color:#FF0000;"><strong>课程案例展示:</strong></span> </p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> <strong><span style="color:#FF0000;">案例01:计算器</span></strong> </p> <p style="color:#666666;"> <img src="http://pic3.ablesky.cn/content/pic/communitythreadphoto/2019/07/20/17e34119-11b3-43b0-8dcf-d9cea3e86a84.gif" alt="" /></p> <p style="color:#666666;"> <span style="color:#FF0000;"><strong>案例02:生成学生成绩</strong></span> </p> <p style="color:#666666;"> <img src="http://pic4.ablesky.cn/content/pic/communitythreadphoto/2019/07/20/cf6e14dc-e492-417b-ae7a-7f463191ddeb.gif" alt="" /></p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> <span style="color:#FF0000;"><strong>案例03:下拉菜单的联动</strong></span><img src="http://pic5.ablesky.cn/content/pic/communitythreadphoto/2019/07/20/d56761d2-2670-4ef4-8268-8c42bf4212d8.gif" alt="" /></p> <p style="color:#666666;"> <span style="color:#FF0000;"><strong>案例04:首页大图轮番</strong></span> </p> <p style="color:#666666;"> <img src="http://pic3.ablesky.cn/content/pic/communitythreadphoto/2019/07/20/8ba2ec2a-f482-45af-be4b-856433152a5d.gif" alt="" /></p> <p style="color:#666666;"> <img src="http://pic4.ablesky.cn/content/pic/communitythreadphoto/2019/07/21/fbc09717-d2fb-455b-8be5-a40334c09e4b.png" alt="" /></p>
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值