今天是视频的最后十五个了。感觉比较多的还是业务上的。但是有几个使用且好玩的小知识点和大家分享一下。

beforeunload

window.addEventListener('beforeunload', function (e) {
  e.preventDefault();
  e.returnValue = 'message'
})

返回结果

面向对象编程的四大原则

面向对象编程简称(OOP)

抽象性
封装性
继承性
多态性

构造函数

切记构造函数最好不要使用箭头函数，因为可能需要this关键字，而箭头函数没有this关键字。

const Person = function (firstName, birthYear) {
   console.log(this);
   this.firstName = firstName
   this.birthYear = birthYear
}

const Jonas = new Person('Jonas', 1991)
console.log(Jonas);

返回结果

instanceof 检测是否为构造函数

const Jonas = new Person('Jonas', 1991)
const jay = 'jay'
console.log(Jonas instanceof Person);
console.log(jay instanceof Person);

返回结果

原型继承 如果我们直接在构造函数中加入函数会影响整体的性能。所以我们使用原型继承。直接上代码。

Person.prototype.calcAge = function () {
    console.log(2037 - this.birthYear);
}

Jonas.calcAge()

返回结果

可以检测需要查看的属性是否在原型里

Person.prototype.species = 'Homo Sapiens'
console.log(Jonas.species);
console.log(Jonas.hasOwnProperty('firstName'));
console.log(Jonas.hasOwnProperty('species'));

返回结果

class

看起来更简洁的构造函数

class PersonCl {
    constructor(firstName, birthYear) {
        this.firstName = firstName
        this.birthYear = birthYear
    }

    calcAge() {
        console.log(2037 - this.birthYear);
    }
}
const jessica = new PersonCl('Jessica', 1996)
jessica.calcAge()

返回结果

事实上我们都推荐使用这种方法来构造函数，但是如果是初学者，不了解原型和原型链，最好不用使用class，因为会理解不了，即使会用。

总结

这个视频终于完结了，大大小小视频加一起，肯定凑够200小时了，感觉收获很多。虽然现在看不出来，但未来的某一天会将你的努力兑现，加油。

第二十二天前端浅记录

beforeunload

面向对象编程的四大原则

构造函数

class

总结