0.JavaScript基础知识
0.1类的基本知识
ES6语法在类中默认开启了use strict严格模式
class Person{
constructor(name, age) {
this.name = name
this.age = age
}
speak(a,b){
console.log(a,b)
console.log(`my name ${this.name}, my age is ${this.age}`)
}
}
const p1 = new Person('jack', 19)
const p2 = new Person('tony', 18)
p1.speak()
p2.speak()
console.log(p1)
console.log(p2)
// 通过call来调用传入一个对象，可接收多个参数传入函数
p1.speak.call(p1,{a:1},{b:2})
class Student extends Person{
constructor(name, age, grade) {
super(name, age);
this.grade = grade
}
speak() {
console.log(`my name ${this.name}, my age is ${this.age}, in the grade ${this.grade}`,)
}
study(){
console.log(`${this.name} in the learn`)
}
}
s1 = new Student('pick', 17, '高一')
console.log(s1)
s1.speak()
s1.study()
class Car {
constructor(name, price) {
this.name = name
this.price = price
this.wheel = 4
}
a = 1
wheel = 4
}
const c1 = new Car('c63', 168)
const c2 = new Car('rs7', 199)
console.log(c1)
console.log(c2)
0.2原生事件绑定
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button onclick="demo()">按钮3</button>
<script type="text/javascript">
const btn1 = document.getElementById('btn1')
btn1.addEventListener('click', ()=>{
alert('btn1 click')
})
const btn2 = document.getElementById('btn2')
btn2.onclick = () => {
alert('btn2 click')
}
function demo() {
alert('btn3 click')
}
</script>
</body>
0.3类中方法this的指向
class Person{
constructor(name, age) {
this.name = name
this.age = age
}
study(){
console.log(this)
}
}
const p1 = new Person('tom', 18)
p1.study() // 通过实例调用,拿到this
const x = p1.study
x() // 直接调用，this为：undefined
0.4展开运算符
let arr1 = [1,3,5,7,9]
let arr2 = [2,4,6,8,10]
console.log(...arr1) // 展开数组
let arr3 = [...arr1, ...arr2] // 连接数组，成为一个新数组
console.log(arr3)
// ...将多个参数转为一个数组
function sum(...number) {
// reduce方法将数组的值累加
return number.reduce((preValue, currentValue) => {
// console.log(preValue,currentValue)
return preValue + currentValue
})
}
console.log(sum(1,2,3,4))
// 构造字面量对象使用展开语法
let person = {name: 'kt', age: 18}
let person2 = {...person} // 复制成一个新对象
// console.log(...person) //报错，展开运算符不能直接展开对象
person.name = 'jerry'
console.log(person.name) // jerry
console.log(person2.name) // kt
let person3 = {...person2, name: 'jack', address: 'sh'} // 生成一个新对象
console.log(person3)
0.5对象相关方法
let a = 'name'
let obj = {}
obj[a] = 'tom'
console.log(obj) // {name: 'tom'}
0.6函数柯里化
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收函数最后统一处理的函数编码形式
function sum(a) {
return (b) => {
return (c) => {
return a + b + c
}
}
}
const result = sum(1)(2)(3)
console.log(result)