js高级语法
1.箭头函数
格式--定义语法：
// 箭头函数是匿名函数，一般做为参数传递
// let test = function (a,b){
// let sum = a + b
// return sum
// }
// let test = (参数) => {函数体}
// 几个小细节
// 1.如果函数体只有一句，那么可以省略{},同时默认会返回函数体的结果，不能写return
// 2.如果只有一个参数，那么可以省略()
// 3.如果没有参数，()也不能省略
// let test = (a,b) => a + b
let test = a => a + 10
let res = test(100)
console.log(res)
2.ES5 创建对象
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function () {
console.log("hello, 我是" + this.name);
};
var p = new Person("lw", 36);
p.sayHi();
2.1子类strudent 继承了父类 Person的属性
// 父类
function Person(name, height) {
this.name = name;
this.height = height;
}
Person.prototype.say = function () {
console.log(this.name);
console.log(this.height);
}
// 子类
function Student(grade, name, height) {
// 借用了父类的构造函数,完成对自己的赋值
Person.call(this, name, height)
this.grade = grade;
}
// 赋值了父类原型上的所有的 属性和方法
Student.prototype = Person.prototype;
// 修改之类的指向
Student.prototype.constructor = Student;
// 创建子类的实例
const stu = new Student("一年", "周星星", 170);
stu.say();
3.ES6 创建对象
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
console.log("hello, 我是" + this.name);
};
}
var p = new Person("lw", 36);
p.sayHi();
3.1ES6-class实现继承
# 继承Person类中的sayHi方法
class Person {
sayHi(){
console.log("hello");
}
}
class Chinese extends Person {}
# 继承Person类中的属性和方法
class Person {
constructor(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
sayHi(){
console.log("hello");
}
}
// 子类
class Chinese extends Person {
constructor(name, age, gender, skin){
// 在子类中，必须在constructor函数中，首先调用super()
super(name, age, gender);
// 调用super之后才可以去写其他代码
this.skin = skin;
}
}
var xm = new Chinese("xm", 20, "male", "黄");
console.log(xm);
xm.sayHi();
4.instanceof 和 constructor(判断一个实例是否属于某个构造函数)
// 构造函数
function Person() {
}
const p1 = new Person();
console.log(p1 instanceof Person);
console.log(p1.__proto__.constructor === Person);
5.对象简写
在定义对象的时候,如果属性名和变量名一致,那么可以实现简写
const name = "悟空";
const skill = "72变";
const say = function () { }
const obj = {
name, skill, say
}
console.log(obj);// {name:"悟空",skill:"72变",say:function(){}}
对象的方法也可以简写
const obj = {
say() {
console.log(this);
}
}
6.解构
提供更加方便获取数组中元素或者对象中属性的写法
获取数组中的元素
const [a, b, c, d] = [1, 2, 3, 4];
console.log(a, b, c, d);// 1,2,3,4
获取对象中的属性（重点）
const obj = {
name: "悟空",
skill: "72变",
say() { }
}
const { name, skill,say } = obj;
console.log(name, skill,say);// 悟空 72变 function(){}
7.拓展（展开）运算符
通过 ...符号来获取剩下的参数
函数内获取
function show(a, ...all) { // 只能放最后
console.log(a);
console.log(all);
}
show(1);// 1 []
show(1, 2, 3);// 1 [2,3]
数组内获取
const [a, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(rest);// [2, 3, 4, 5]
对象内获取
const obj={
name:"悟空",
skill:"72变",
say(){}
}
const {name,...others}=obj;
console.log(name); // 悟空
console.log(others); // {skill: "72变", say: ƒ}
8.this与函数的四种调用模式
根据函数内部this的指向不同，可以将函数的调用模式分成4种
- 函数调用模式
- 方法调用模式
- 构造函数调用模式
- 上下文调用模式（借用方法模式）
函数调用模式
如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window
function fn(){
console.log(this);// 指向window
}
fn();
方法调用模式
当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到当前对象
const obj = {
sayHi:function(){
console.log(this);//在方法调用模式中，this指向调用当前方法的对象。
}
}
obj.sayHi();
构造函数调用模式
如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。
function Person(){
console.log(this);
}
Person();//this指向什么？
var p = new Person();//this指向什么？
方法借用模式
也叫上下文模式,分为 apply 与 call，bind
call
call方法可以调用一个函数，并且可以指定这个函数的this指向
const RichWumon = {
name: "富婆",
say: function () {
console.log(this.name, " 我要重金求子");
}
}
const obj = {
name: "屌丝"
}
RichWumon.say(); // 富婆
RichWumon.say.call(obj); // 屌丝
this的指向
-
单独使用，
this指向全局对象console.log(this); -
函数中的
this指向全局对象function show(){ console.log(this); } show(); -
在函数内部，
this的指向在函数定义的时候是不能确定的，只有函数执行的时候才能确定const a = 18; const obj = { a: 19, b: { a: 20, c: function () { console.log(this.a); // 20 } } } obj.b.c(); -
在方法中，
this指代该调用方法的对象const obj ={ name:"小白", say:function(){ console.log(this); } } obj.say()
简单数据类型的存储关系
复杂数据类型的存储关系
