模范爸爸|「干货满满」1.5w字初中级前端面试复习总结( 三 )
使用:
function Person() {this.name = 'people'}Person.prototype.sayName = function () { console.log(this.name) }function Child() {this.name = 'child'}inherit(Child, Person)Child.prototype.age = 18let child = new Child()
ES6 Classclass Person {constructor() {this.name = 'people'}sayName() {console.log(this.name)}}class Child extends Person {constructor() {super()this.name = 'child'}}Child.prototype.age = 18let child = new Child()
Class 可以通过 extends 关键字实现继承 , 这比 ES5 的通过修改原型链实现继承 , 要清晰和方便很多 。
基本包装类型let str = 'hello'str.split('')
基本类型按道理说是没有属性和方法 , 但是在实际操作时 , 我们却能从基本类型调用方法 , 就像一个字符串能调用 split 方法 。
为了方便操作基本类型值 , 每当读取一个基本类型值的时候 , 后台会创建一个对应的基本包装类型的对象 , 从而让我们能够调用方法来操作这些数据 。 大概过程如下:
- 创建String类型的实例
- 在实例上调用指定的方法
- 销毁这个实例
let str = new String('hello')str.split('')str = null
thisthis是函数被调用时发生的绑定 , 它指向什么完全取决于函数在哪里被调用 。 我理解的this是函数的调用者对象 , 当在函数内使用this , 可以访问到调用者对象上的属性和方法 。this绑定的四种情况:
- new 绑定 。 new实例化
- 显示绑定 。 call、apply、bind手动更改指向
- 隐式绑定 。 由上下文对象调用 , 如 obj.fn() , this 指向 obj
- 默认绑定 。 默认绑定全局对象 , 在严格模式下会绑定到undefined
new的过程
- 创建一个空对象
- 设置原型 , 将对象的 __proto__ 指向构造函数的 prototype
- 构造函数中的 this 执行对象 , 并执行构造函数 , 为空对象添加属性和方法
- 返回实例对象
// 返回基本类型function Foo(){this.name = 'Joe'return 123this.age = 20}new Foo() // Foo {name: "Joe"}// 返回引用类型function Foo(){this.name = 'Joe'return [123]this.age = 20}new Foo() // [123]
call、apply、bind三者作用都是改变this指向的 。call 和 apply 改变 this 指向并调用函数 , 它们两者区别就是传参形式不同 , 前者的参数是逐个传入 , 后者传入数组类型的参数列表 。
bind 改变 this 并返回一个函数引用 , bind 多次调用是无效的 , 它改变的 this 指向只会以第一次调用为准 。
手写call
Function.prototype.mycall = function () {if(typeof this !== 'function'){throw 'caller must be a function'}let othis = arguments[0] || windowothis._fn = thislet arg = [...arguments].slice(1)let res = othis._fn(...arg)Reflect.deleteProperty(othis, '_fn') //删除_fn属性return res}
apply 实现同理 , 修改传参形式即可手写bind
Function.prototype.mybind = function (oThis) {if(typeof this != 'function'){throw 'caller must be a function'}let fThis = this//Array.prototype.slice.call 将类数组转为数组let arg = Array.prototype.slice.call(arguments,1)let NOP = function(){}let fBound = function(){let arg_ = Array.prototype.slice.call(arguments)// new 绑定等级高于显式绑定// 作为构造函数调用时 , 保留指向不做修改// 使用 instanceof 判断是否为构造函数调用return fThis.apply(this instanceof fBound ? this : oThis, arg.concat(arg_))}// 维护原型if(this.prototype){NOP.prototype = this.prototypefBound.prototype = new NOP()}return fBound}
- 小机灵鬼|干货速来!透彻剖析微服务架构设计模式,深入开发Java有奇效
- 钱江晚报|小学生给天上的爸爸写信:我为有这样的爸爸感到自豪,如果你在该有多好啊
- 美容|蒋依依分享护肤干货,网友纷纷不理解:20岁不到就要抗衰老了?
- 跳空缺口|干货:A股经典缺口理论,看懂炒股事半功倍!
- 宝宝红屁股咋办?爱得利高能干货来支招~
- 向太否认郭碧婷已生女|捕风捉影!向太否认郭碧婷已生女 郭碧婷爸爸美食招待向佐
- 掌握珍爱APP里的脱单干货,你也可以成为平平无奇的恋爱小天才
- 郭碧婷爸爸美食招待向佐|郭碧婷爸爸美食招待向佐 郭碧婷和向佐领证了吗?
- 郭碧婷爸爸美食招待向佐|给半子!郭碧婷爸爸美食招待向佐心情大好 翁婿感情十分融洽
- 女孩|宠物狗咬伤小女孩,达成调解协议后,狗却被女孩爸爸摔死