1. this
this是 JavaScript 语言的一个关键字。 它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。
2.改变this指向
-
call方法
1.call()方法可以进行普通函数的调用
2.call()方法可以改变this的指向,如果没有参数,this指向window
3.call()方法可以改变this的指向,如果有一个参数,this指向该参数
4.call()方法可以改变this的指向,如果有多个参数,this指向第一个参数,剩下的是个参数列表(构造函数继承的案例)
-
apply方法
1.apply()方法可以进行普通函数的调用
2.apply()方法可以改变this的指向,如果没有参数,this指向window
3.apply()方法可以改变this的指向,如果有一个参数,this指向该参数
4.apply()方法可以改变this的指向,如果有多个参数,第一个参数是null或者window,第二个参数是数组
-
bind方法
推荐使用第二种形式,第三种用的相对较少,但也是必须掌握的内容。
bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体(在 ECMAScript 5 规范中内置的call属性)。当目标函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。绑定函数被调用时,bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。
<script>
// 1、
var fn1 = function () {
console.log("我是函数表达式");
}
// fn1();
fn1.call();
var name = "小红";
var obj1 = {
name: "小花",
getName: function () {
console.log(1111);
console.log(this.name);
}.bind()
}
obj1.getName();
/* obj1.getName();//小花
obj1.getName.call();//小红 */
var obj2 = {
name: "小刚",
getName: function () {
console.log(this.name);
}
}
obj2.getName();
obj2.getName.call();
obj2.getName.call(obj1); //小花
// 2、
fn1.apply()
obj1.getName.apply(); //小红
obj2.getName.apply(obj1); //小花
console.log(Math.max(20, 30, 50)); //50
console.log(Math.max.call(window, 20, 30, 50)); //50
console.log(Math.max.apply(Window, [20, 30, 50])); //50
console.log(Math.max.apply(null, [20, 30, 50])); //50
// 3、
// fn1.bind();
var fn2 = function () {
console.log(22222222222222);
console.log(this.name); //小红 小花
console.log("bind调用");
}.bind()
// .bind(obj1)
fn2()
// fn2.bind();
var name = "喜羊羊";
var object = {
name: "懒洋洋",
getName: function () {
var name = "美羊羊";
var that = this;
console.log(this.name); //懒羊羊
console.log(name); //喜羊羊 美羊羊
function func1() {
console.log(this.name); //喜羊羊
console.log(name); //美羊羊 undefined
// var name = "村长羊";
}
func1();
var name = "暖羊羊"
var name = function () {
console.log(name); //f name()
console.log(this.name);
}
name();
var func2 = function () {
console.log("999999999999999999999999999999");
console.log(name);
console.log(this.name); //喜羊羊 懒羊羊
// }.bind(this)
return name;
// console.log(this.name);
}.bind(that)
console.log(func2());
func2.call(this);
}
}
//
object.getName();
-
ES6
其实就是 JS 发展过程中的 某一个 版本而已 那个版本的版本号叫做 ES6微信
在最初的时候, 是不具有 微信支付
随着版本的更新, 在某一个版本内推出了 微信支付JS
在最初的时候, 是只有 var 关键可以声明变量
随着版本的更新, 在某一个版本内推出了 新的变量声明方式JS 的更新
在 推出ES6 的时候, 这个版本推出的新东西比较多
所以后续程序员们为了方便记忆, 把 ES6 以后的版本 统称为 ES6+ -
ES6 新增两种变量声明的 方式
ES5 我们只能使用 var 声明变量 * 语法 和 var 一样 * * let 变量名 = 值 * const 变量名 = 值 * * let/const 与 var 的差异 * * 1. let/const 声明的变量 不允许出现重复的 * * 使用 var 声明变量的时候可以出现重复声明, 后一个值会覆盖前一个值 * * let/const 不允许 * 2. let/const 声明的变量没有变量提升 * * var 关键字声明的变量有变量提升, 值为 undefined * * let/const 不允许 * 3. let/const 声明的变量 会受限于 所有的 {} * * 也就是 使用 let/const 声明的变量 是块级作用域 * * var 声明的变量 只受限于 函数内部 * * let 与 const 的差异 * 1. let 声明的叫做变量(后续可以修改内部的值); * const 声明的叫做常量(后续不能修改内部的值, 也不能修改内部的引用地址) * 2. 因为 let 后续可以修改变量的值, 所以他首次定义时, 可以不赋值; * 但是 const 声明的时常量, 后续不能重新修改他的值, 所以首次定义时, 必须赋值 -
箭头函数
如果形参只有一个,则小括号可以省略;函数体如果只有一条语句,则花括号可以省略,并省略return,函数的返回值为该条语句的执行结果;
箭头函数 this 指向声明时所在作用域下 this 的值;
箭头函数不能作为构造函数实例化;
不能使用 arguments;
-
展开运算符
展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。
展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。iterables的实现是依靠[Symbol.iterator]函数,而目前只有Array,Set,String内置[Symbol.iterator]方法,而Object尚未内置该方法,因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。
-
Map和Object的区别
一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值。Map中的键值是有序的(FIFO 原则),而添加到对象中的键则不是。
Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。
Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
Map对象的属性
size:返回Map对象中所包含的键值对个数
Map对象的方法
set(key, val): 向Map中添加新元素get(key): 通过键值查找特定的数值并返回
has(key): 判断Map对象中是否有Key所对应的值,有返回true,否则返回false
delete(key): 通过键值从Map中移除对应的数据
clear(): 将这个Map中的所有元素删除