Shulou(Shulou.com)06/03 Report--

JavaScript in a variety of source code is how to achieve, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

To be able to handwrite a variety of JavaScript native functions can be said to be the first step to get rid of the API caller hat, we should not only know how to use it, but also to explore its implementation principle!

The learning and implementation of JavaScript source code can help us to improve our front-end programming ability quickly and solidly.

Implement a new operator

The first thing we know is what new did:

Create an empty simple JavaScript object (that is, {})

Link this object (that is, set its constructor) to another object

Use the newly created object in step (1) as the context of the this

If the function does not return an object, it returns this.

Knowing what new has done, let's implement it.

Function create (Con,... args) {

/ / create an empty object

This.obj = {}

/ / point the empty object to the prototype chain of the constructor

Object.setPrototypeOf (this.obj, Con.prototype)

/ / obj is bound to the constructor and you can access the property in the constructor, that is, this.obj.Con (args)

Let result = Con.apply (this.obj, args)

/ / return if the returned result is an object

/ / the new method is invalid, otherwise obj is returned

Return result instanceof Object? Result: this.obj

}

Implement an Array.isArray

The idea is very simple, that is to use Object.prototype.toString

Array.myIsArray = function (o) {

Return Object.prototype.toString.call (Object (o)) = ='[object Array]'

}

Implement an Object.create () method

Function create = function (o) {

Var F = function () {}

F.prototype = o

Return new F ()

}

Implement an EventEmitter

Real experience, recently in the byte jump of the interview was asked by the interviewer, let me handwritten implementation of a simple Event class.

Class Event {

Constructor () {

/ / data structure for storing events

/ / to find it quickly, use the object (dictionary)

This._cache = {}

}

/ / bind

On (type, callback) {

/ / in order to find by class convenient and save space

/ / put the same type of events in an array

/ / the array here is a queue, following the first-in, first-out

/ / that is, the newly bound event is triggered first.

Let fns = (this._ [type] = this._ [type] | | [])

If (fns.indexOf (callback) = =-1) {

Fns.push (callback)

}

Return this

}

/ / unbind

Off (type, callback) {

Let fns = this._ Cache [type]

If (Array.isArray (fns)) {

If (callback) {

Let index = fns.indexOf (callback)

If (index! =-1) {

Fns.splice (index, 1)

}

} else {

/ / empty all

Fns.length = 0

}

}

Return this

}

/ / trigger emit

Trigger (type, data) {

Let fns = this._ Cache [type]

If (Array.isArray (fns)) {

Fns.forEach ((fn) = > {

Fn (data)

})

}

Return this

}

/ / one-time binding

Once (type, callback) {

Let wrapFun = () = > {

Callback.call (this)

This.off (type, callback)

}

This.on (wrapFun, callback)

Return this

}

}

Let e = new Event ()

E.on ('click',function () {

Console.log ('on')

})

E.on ('click',function () {

Console.log ('onon')

})

/ / e.trigger ('click',' 666')

Console.log (e)

Implement an Array.prototype.reduce

First, take a look at the Array.prototype.reduce syntax.

Array.prototype.reduce (callback (accumulator, currentValue [, index [, array]]) [, initialValue])

And then you can do it:

Array.prototype.myReduce = function (callback, initialValue) {

Let accumulator = initialValue? InitialValue: this [0]

For (let I = initialValue? 0: 1; I

< this.length; i++) { 　　let _this = this; 　　accumulator = callback(accumulator, this[i], i, _this); 　　} 　　return accumulator; 　　}; 　　// 使用 　　let arr = [1, 2, 3, 4]; 　　let sum = arr.myReduce((acc, val) =>

{

Acc + = val

Return acc

}, 5)

Console.log (sum); / / 15

Implement a call or apply

Let's take a look at an example of call to see what call has done:

Let foo = {

Value: 1

}

Function bar () {

Console.log (this.value)

}

Bar.call (foo); / / 1

From the execution result of the code, we can see that call first changes the direction of this so that the this of the function points to foo, and then makes the bar function execute.

To sum up:

Call changes the function this to point to

Call function

Think about it: how can we achieve the above effect? The code is modified as follows:

Function.prototype.myCall = function (context) {

Context = context | | window

/ / Mount the function to the fn property of the object

Context.fn = this

/ / process the passed parameters

Const args = [... arguments] .slice (1)

/ / call this method through the properties of the object

Const result = context.fn (. Args)

/ / Delete the attribute

Delete context.fn

Return result

}

Let's take a look at the code above:

First of all, we have done compatible processing for the parameter context. No value is passed, and the default value of context is window.

Then we mount the function on context, context.fn = this

Process the parameters, intercept the parameters passed into myCall, remove the first bit, and then convert them to an array

Call context.fn, and the this of fn points to context

Delete the property delete context.fn on the object

Return the result.

And so on, let's implement apply by the way, the only difference is the handling of parameters, the code is as follows:

Function.prototype.myApply = function (context) {

Context = context | | window

Context.fn = this

Let result

/ / the parameter form of myApply is (obj, [arg1,arg2,arg3])

/ / so the second parameter of myApply is [arg1,arg2,arg3]

/ / here we use the extension operator to deal with the way parameters are passed in.

If (arguments [1]) {

Result = context.fn (… Arguments [1])

} else {

Result = context.fn ()

}

Delete context.fn

Return result

}

The above is the simulation implementation of call and apply, the only difference is the way the parameters are handled.

Implement a Function.prototype.bind

Function Person () {

This.name= "zs"

This.age=18

This.gender= "male"

}

Let obj= {

Hobby: "Reading"

}

/ / bind the constructor's this to obj

Let changePerson = Person.bind (obj)

/ / call the constructor directly, which manipulates the obj object and adds three attributes to it

ChangePerson ()

/ / 1. Output obj

Console.log (obj)

/ / new an instance with a constructor that changes the point of this

Let p = new changePerson ()

/ / 2. Output obj

Console.log (p)

Take a closer look at the above code and then look at the output.

We use bind on the Person class to point its this to obj and get the changeperson function. Here, if we call changeperson directly, we will change obj. If we call changeperson with new, we will get instance p, and its _ _ proto__ points to Person. We find that bind is invalid.

We have come to the conclusion that the function pointed to by this is changed with bind, and if called with the new operator, bind will be invalidated.

This object is an example of this constructor, so as long as you execute the this instanceof constructor inside the function to determine whether the result is true, you can determine whether the function is called through the new operator. If the result is true, it is called with the new operator. The code is modified as follows:

/ / bind implementation

Function.prototype.mybind = function () {

/ / 1. Save the function

Let _ this = this

/ / 2. Save the target object

Let context = arguments [0] | | window

/ / 3. Save the parameters outside the target object and convert them to an array

Let rest = Array.prototype.slice.call (arguments,1)

/ / 4. Return a function to be executed

Return function F () {

/ / 5. Convert the parameters passed twice to an array

Let rest2 = Array.prototype.slice.call (arguments)

If (this instanceof F) {

/ / 6. If you call it with the new operator, call the original function directly with new and pass parameters with the extension operator

Return new _ this (. Rest2)

} else {

/ / 7. Call the function saved in the first step with apply, bind this, and pass the merged parameter array, that is, context._this (rest.concat (rest2))

_ this.apply (context,rest.concat (rest2))

}

}

}

Implement a JS function to be Corey

The concept of Currying is not complicated, in easy-to-understand words: pass only part of the arguments to the function to call it, and let it return a function to handle the remaining parameters.

Function progressCurrying (fn, args) {

Let _ this = this

Let len = fn.length

Let args = args | | []

Return function () {

Let _ args = Array.prototype.slice.call (arguments)

Array.prototype.push.apply (args, _ args)

/ / if the number of parameters is less than the original fn.length, it will be called recursively and continue to collect parameters

If (_ args.length

< len) { 　　return progressCurrying.call(_this, fn, _args); 　　} 　　// 参数收集完毕，则执行fn 　　return fn.apply(this, _args); 　　} 　　} 　　手写防抖(Debouncing)和节流(Throttling) 　　节流 　　防抖函数 onscroll 结束时触发一次，延迟执行 　　function debounce(func, wait) { 　　let timeout; 　　return function() { 　　let context = this; // 指向全局 　　let args = arguments; 　　if (timeout) { 　　clearTimeout(timeout); 　　} 　　timeout = setTimeout(() =>

{

Func.apply (context, args); / / context.func (args)

}, wait)

}

}

/ / use

_ window.onscroll = debounce (function () {

Console.log ('debounce')

}, 1000)

The throttle function onscroll is triggered at regular intervals, like water droplets.

Function throttle (fn, delay) {

Let prevTime = Date.now ()

Return function () {

Let curTime = Date.now ()

If (curTime-prevTime > delay) {

Fn.apply (this, arguments)

PrevTime = curTime

}

}

}

/ / use

Var throtteScroll = throttle (function () {

Console.log ('throtte')

}, 1000)

_ window.onscroll = throtteScroll

JSON.parse (JSON.stringfy))

It is very simple, but the defects are also obvious, such as copying other reference types, copying functions, circular references, and so on.

Basic edition

Function clone (target) {

If (typeof target = = 'object') {

Let cloneTarget = {}

For (const key in target) {

CloneTarget [key] = clone (Target [key])

}

Return cloneTarget

} else {

Return target

}

}

Writing here can help you cope with some interviewers to examine your recursive problem-solving ability. But obviously, there are still some problems with this deep copy function.

For a relatively complete deep copy function, you need to consider both objects and arrays and circular references:

Function clone (target, map = new WeakMap ()) {

If (typeof target = = 'object') {

Let cloneTarget = Array.isArray (target)? []: {}

If (map.get (target)) {

Return target

}

Map.set (target, cloneTarget)

For (const key in target) {

CloneTarget [key] = clone (target [key], map)

}

Return cloneTarget

} else {

Return target

}

}

Implement an instanceOf

Principle: whether the proto of L is equal to R.prototype does not mean that you can find L.L. Protozoa. Until proto is null.

/ / L for the left expression, R for the right expression

Function instance_of (L, R) {

Var O = R.prototype

L = L.protoplast _

While (true) {

If (L = null) {

Return false

}

/ / key point here: when O is strictly equal to L, true is returned.

If (O = L) {

Return true

}

L = L.protoplast _

}

}

Implement prototype chain inheritance

Function myExtend (C, P) {

Var F = function () {}

F.prototype = P.prototype

C.prototype = new F ()

C.prototype.constructor = C

C.super = P.prototype

}

Implement an async/await

Principle.

Is to use generator (generator) to split the code snippet. Then we use a function to iterate through itself, with each yield wrapped in promise. The timing of the next step is controlled by promise

Realize

Function _ asyncToGenerator (fn) {

Return function () {

Var self = this

Args = arguments

/ / convert the return value to

Return new Promise (function (resolve, reject) {

/ / get iterator instance

Var gen = fn.apply (self, args)

/ / perform the next step

Function _ next (value) {

AsyncGeneratorStep (gen, resolve, reject, _ next, _ throw, 'next', value)

}

/ / throw an exception

Function _ throw (err) {

AsyncGeneratorStep (gen, resolve, reject, _ next, _ throw, 'throw', err)

}

/ / trigger for the first time

_ next (undefined)

})

}

}

Implement an Array.prototype.flat () function

Recently, the front-end interview with bouncing bytes was also asked by the interviewer to achieve it by handwriting.

Array.prototype.myFlat = function (num = 1) {

If (Array.isArray (this)) {

Let arr = []

If (! Number (num) | | Number (num)

< 0) { 　　return this; 　　} 　　this.forEach(item =>

{

If (Array.isArray (item)) {

Let count = num

Arr = arr.concat (item.myFlat (--count))

} else {

Arr.push (item)

}

})

Return arr

} else {

Throw tihs + ".flat is not a function"

}

}

Implement an event broker

This question usually asks you to talk about event bubbling and event capture mechanisms.

Red

Yellow

Blue

Green

Black

White

Implement a two-way binding

Object.defineProperty version of Vue 2.x

/ / data

Const data = {

Text: 'default'

}

Const input = document.getElementById ('input')

Const span = document.getElementById ('span')

/ / data hijacking

Object.defineProperty (data, 'text', {

/ / data changes-> modify the view

Set (newVal) {

Input.value = newVal

SPAN [XSS _ clean] = newVal

}

})

/ / View changes-- > data changes

Input.addEventListener ('keyup', function (e) {

Data.text = e.target.value

})

Proxy version of Vue 3.x

/ / data

Const data = {

Text: 'default'

}

Const input = document.getElementById ('input')

Const span = document.getElementById ('span')

/ / data hijacking

Const handler = {

Set (target, key, value) {

Target [key] = value

/ / data changes-> modify the view

Input.value = value

SPAN [XSS _ clean] = value

Return value

}

}

Const proxy = new Proxy (data, handler)

/ / View changes-- > data changes

Input.addEventListener ('keyup', function (e) {

Proxy.text = e.target.value

})

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.