22 * @Author : Tiny
33 * @Date : 2020-01-03 17:10:03
44 * @Last Modified by: [email protected] 5- * @Last Modified time: 2020-01-07 23:30:48
5+ * @Last Modified time: 2020-01-17 17:36:10
66 */
77
88/**
99 * 原生js你知道多少?
1010 * 1: 函数的arguments为什么不是数组？如何转化成数组？
1111 * 2: forEach中return有效果吗？如何中断forEach循环？
12- * 3: JS判断数组中是否包含某个值?
13- * 4: JS中flat---数组扁平化?
12+ * 3: JS判断数组中是否包含某个值,有几种方法 ?
13+ * 4: JS中flat---数组扁平化,有多少种方法 ?
1414 * 5: JS数组的高阶函数: map/reduce/filter/sort/some/every/find(能不能分别实现他们?)
1515 * 6: 能不能模拟实现new的功能
1616 * 7: 能不能模拟实现bind功能
5454 * 4: JS中flat---数组扁平化?
5555 */
5656// 一: es6的flat方法
57- array = arrray . flat ( Infinity ) ;
57+ let arrray = [ 1 , [ 2 , 3 , [ 4 , 5 ] ] , 6 ]
58+ let array1 = arrray . flat ( Infinity ) ;
59+ console . log ( array1 ) // [ 1, 2, 3, 4, 5, 6 ]
5860
5961// 二: replace + split
60- array = str . replace ( / ( \[ | \] ) / g, '' ) . split ( ',' ) ;
62+ let str2 = String ( [ 1 , [ 2 , 3 , [ 4 , 5 ] ] , 6 ] )
63+ let array2 = str2 . replace ( / ( \[ | \] ) / g, '' ) . split ( ',' ) ;
64+ console . log ( array2 ) // [ '1', '2', '3', '4', '5', '6' ]
6165
6266// 三: replace + JSON.parse
63- str = str . replace ( / ( \[ | \] ) / g, '' ) ;
64- str = '[' + str + ']' ;
65- array = JSON . parse ( str ) ;
67+ let str3 = [ 1 , [ 2 , 3 , [ 4 , 5 ] ] , 6 ] . toString ( )
68+ str3 = str3 . replace ( / ( \[ | \] ) / g, '' ) ;
69+ str3 = '[' + str3 + ']' ;
70+ let array3 = JSON . parse ( str3 ) ;
71+ console . log ( array3 ) // [ 1, 2, 3, 4, 5, 6 ]
6672
6773// 四: 普通递归
6874let result = [ ] ;
69- let fn = ary => {
75+ const fn = ary => {
7076 for ( let i = 0 ; i < ary . length ; i ++ ) {
7177 const item = ary [ i ] ;
7278 if ( Array . isArray ( item ) ) {
@@ -76,7 +82,139 @@ let fn = ary => {
7682 }
7783 }
7884}
85+ fn ( [ 1 , [ 2 , 3 , [ 4 , 5 ] ] , 6 ] )
86+ console . log ( result )
87+
88+ /**
89+ * 6: 能不能模拟实现new的功能
90+ * 分析: new的实例对象能访问原型的属性,也能访问构造函数的属性
91+ */
92+
93+ //new的模拟实现
94+ function Person ( name , age ) {
95+ this . name = name ;
96+ this . age = age ;
97+
98+ // this.hibit = 'Games';
99+ return null
100+ }
101+ Person . prototype . strenth = 60 ;
102+ Person . prototype . sayYouName = function ( ) {
103+ console . log ( 'I am ' + this . name ) ;
104+ } ;
105+
106+ // const people = new Person('Jack', 20);
107+ const people = ObjFactory ( Person , 'Jack' , 20 ) ;
108+ console . log ( people . name )
109+ console . log ( people . age )
110+ console . log ( people . strenth )
111+ people . sayYouName ( )
112+
113+
114+ function ObjFactory ( ) {
115+ // 从Object.prototype上克隆一个对象
116+ const obj = new Object ( ) ;
117+
118+ // 取得外部传入的构造器
119+ const Constructor = [ ] . shift . call ( arguments ) ;
120+
121+ // 指向正确的原型,将对象的原型指向构造函数的原型
122+ obj . __proto__ = Constructor . prototype ;
123+
124+ // 借用外部传入的构造器给obj设置属性
125+ const ret = Constructor . apply ( obj , arguments ) ;
126+
127+ // 确保构造器总是返回一个对象
128+ return typeof ret === 'object' ? ret || obj : obj ;
129+ }
79130
131+ /**
132+ * 7: 能不能模拟实现bind功能
133+ */
134+ var value = 2 ;
135+
136+ var foo = {
137+ value : 1
138+ } ;
139+
140+ function bar ( name , age ) {
141+ this . habit = 'shopping' ;
142+ console . log ( this . value ) ;
143+ console . log ( name ) ;
144+ console . log ( age ) ;
145+ }
146+
147+ bar . prototype . friend = 'kevin' ;
148+
149+ var bindFoo = bar . bind ( foo , 'daisy' ) ;
150+
151+ var obj = new bindFoo ( '18' ) ;
152+ console . log ( obj . __proto__ , bindFoo . __proto__ , bar . prototype )
153+ // undefined
154+ // daisy
155+ // 18
156+ console . log ( obj . habit ) ;
157+ console . log ( obj . friend ) ;
158+ // shopping
159+ // kevin
160+
161+
162+ /**
163+ * 8: 能不能实现call/apply函数
164+ */
165+ /**
166+ * 注意两点:
167+ * a: call改变this指向,指到两foo
168+ * b: bar函数执行了
169+ */
170+ const foo = {
171+ value : 1
172+ } ;
173+ function bar ( name , age ) {
174+ console . log ( this . value , name , age ) ;
175+ return {
176+ name,
177+ age,
178+ value : this . value
179+ } ;
180+ }
181+ bar . call ( foo , 'jrg' , '18' ) ;
182+
183+ Function . prototype . newCall = function ( context ) {
184+ // 首先要获取调用call的函数,用this可以获取
185+ context = context || window
186+ context . fn = this ;
187+ let args = [ ] ;
188+ for ( let i = 1 ; i < arguments . length ; i ++ ) {
189+ args . push ( `arguments[${ i } )
190+ }
191+ const result = eval ( `context.fn(${ args } )
192+ // eval(`context.fn(${args})`)
193+ // context.fn()
194+ console . log ( result )
195+ delete context . fn ;
196+
197+ return result ;
198+ }
199+ bar . newCall ( foo , 'Jeck' , 20 ) ;
200+
201+ Function . prototype . newApply = function ( context , arr ) {
202+ context = Object ( context ) || window ;
203+ context . fn = this ;
204+
205+ let result ;
206+ if ( ! arr ) {
207+ result = context . fn ( ) ;
208+ } else {
209+ let args = [ ] ;
210+ for ( let i = 1 ; i < arr . length ; i ++ ) {
211+ args . push ( `arr[${ i } )
212+ }
213+ result = eval ( `context.fn(${ arts } )
214+ }
215+ delete context . fn ;
216+ return result ;
217+ }
80218/**
81219 * 9: 谈谈你对js中this对理解
82220 * 一: 定义:当前执行代码的环境对象
0 commit comments