Javscript 基础

Posted 2021-06-01 Jinhao Chen

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