每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用:为一个特定类声明通用的变量或者函数。prototype是一个对象,因此,你能够给它添加属性。你添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。
由于js类的定义方法和函数的定义方法一样,所以定义构造函数的同时就定义了类。构造函数内的方法和属性也就是类中的方法和属性。
该方式利用了对象的prototype属性。首先定义了一个空函数,然后通过prototype属性来定义对象的属性。调用该函数时,原型的所有属性都会立即赋予要创建的对象
面向对象的语言有一个标志,即拥有类的概念
js创建对象的方式包括两种:对象字面量和使用new表达式。对应代码:
继承是指一个对象直接使用另一对象的属性和方法
对象冒充,及call()Apply()参见上述call和apply的用法。
js中每个对象均有一个隐藏的__proto__属性,一个实例化对象的__proto__属性指向其类的prototype方法,而这个prototype方法又可以被赋值成另一个实例化对象,这个对象的__proto__又需要指向其类,由此形成一条链。
那么__proto__是什么?我们在这里简单地说下。每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。
“事件处理程序过多”问题的解决方案就是事件委托。
事件委托利用的是事件冒泡机制,只制定一事件处理程序,就可以管理某一类型的所有事件(使用事件委托,只需在DOM树中尽量最高的层次上添加一个事件处理程序)。
这里要用到事件源:event 对象,需要用到target属性,其 事件属性可返回事件的目标节点(触发该事件的节点)
37.js自定义事件:
on()是jQuery中的类似于bind(),live(),delegate()等绑定事件的方法。
trigger() 方法触发被选元素的指定事件类型。先给固定元素绑定一个自定义事件”someclick”,然后必须通过trigger()来使自定义事件可以使用。
函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。函数b是你以参数形式传给函数a的,那么函数b就叫回调函数。回调函数可以继续扩展一个函数的功能,可以是程序非常灵活。
,而"flex"是2012年的语法,是css3新规定的,也将是以后标准的语法。将父元素的display属性设置为-webkit-box(box),然后子元素通过属性-webkit-box-flex来指定一个框的子元素是否是灵活的或固定的大小,如上,定义两个灵活的p元素。如果父级box的总宽度为300px,#P1将有一个100px的宽度,#P2将有一个200px的宽度,也就是呈固定比例划分。当然了,也可以这样写:
当然了css3规定了,一系列的有关box的属性,比如 box-shadow。。。。。
自适应指的就是指其长(宽)度可以根据浏器窗口的大小自动改变其长(宽)度(随浏览器长(宽)的改变而改变),而不会被浏览器遮住。
实现方法(以左侧固定,右侧自适应为例):
①采用左列 left 浮动,右列不浮动,采用 margin-left 定位的方式。
②左列使用绝对定位,右列使用 margin-left 定位。
43.我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获!!!
45.从输入 URL 到页面加载完的过程中都发生了什么事情?
①首先如果我们如果输入的不是ip地址,而是域名的话,就需要IP解析,DNS域名解析(具体见DNS工作机制)。
②解析出来对应的IP后,如不包含端口号,http协议默认端口号是80;https(http+ssl(传输层))是430!然后向IP发起网络连接,根据http协议要求,组织一个请求的数据包,里面包含大量请求信息。
③服务器响应请求,将数据返回给浏览器。数据可能是根据HTML协议组织的网页,里面包含页面的布局、文字。数据也可能是图片、脚本程序等。
④开始根据资源的类型,将资源组织成屏幕上显示的图像,这个过程叫渲染,网页渲染是浏览器最复杂、最核心的功能。
⑤将渲染好的页面图像显示出来,并开始响应用户的操作。
计算机发明后,为了在计算机中表示字符,人们制定了一种编码,叫ASCII码。
中国人利用连续2个扩展ASCII码的扩展区域(0xA0以后)来表示一个汉字,该方法的标准叫GB-2312。因为各个国家地区定义的字符集有交集,因此使用GB-2312的软件,就不能在BIG-5的环境下运行(显示乱码),反之亦然。
48.JS的数据类型:字符串、数字、布尔、数组、对象、Null、Undefined
undefined表示变量声明但未初始化时的值,javascript解释器不知道这是什麽东西,会抛出"未定义"的错误
null表示准备用来保存对象,还没有真正保存对象的值。从逻辑角度看,null值表示一个空对象指针,意思是你定义了它,但它没有分配内存空间。
css3总的说来大概就是边框的一些特殊样式,比如圆角,还有就是渐变,动画。
round : 图像平铺(重复)来填充该区域。
Stretch 这里,图像被拉伸以填充该区域。
Svg支持事件处理器,canvas不支持事件处理器
在 SVG 中,每个被绘制的图形均被视为对象,而canvas能够以 .png 或 .jpg 格式保存结果图像
如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Html5的拖放功能、
HTML5 新的表单元素:
select:5个值里面选择1个;
datalist:你可以在文本框里填值,也可以在下面5个值里选1个。
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时,会生成两个键,一个是私钥,一个公钥。
<output> 元素用于不同类型的输出,比如计算或脚本输出:
1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载得更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
PS:新加一些问题,小伙伴们都会不会呀,不会赶紧去恶补呦。
1.html的doctype作用?严格模式和混杂模式都是什么?
2.列举js异步编程的方法
3.Css选择器(符)有哪些?哪些可继承?优先级如何?
4.setTimeout()的时间参数最小可以是多少?为什么?
当一个函数调用时,会创建一个执行上下文,这个上下文包括函数调用的一些信息(调用栈,传入参数,调用方式),this
就指向这个执行上下文。
this不是静态的,也并不是在编写的时候绑定的,而是在运行时绑定的。它的绑定和函数声明的位置没有关系,只取决于函数调用的方式。
本篇文章有点长,涉及到很多道面试题,有难有简单,如果能耐心的通读一编,我相信以后this都不成问题。
学习this之前,建议先学习以下知识:
在文章的最开始,陈列一下本篇文章涉及的内容,保证让大家不虚此行。
在JavaScript
中,要想完全理解this
,首先要理解this
的绑定规则,this
的绑定规则一共有5种:
ES6
新增箭头函数绑定
下面来一一介绍以下this
的绑定规则。
默认绑定通常是指函数独立调用,不涉及其他绑定规则。非严格模式下,this
指向window
,严格模式下,this
指向undefined
。
这个foo
值可以说道两句:
如果学习过预编译的知识,在预编译过程中,foo
和print
函数会存放在全局GO
中(即window
对象上),所以上述代码就类似下面这样:
把题目1.1
稍作修改,看看严格模式下的执行结果。
注意事项:开启严格模式后,函数内部this
指向undefined
,但全局对象window
不会受影响
let/const
定义的变量存在暂时性死区,而且不会挂载到window
对象上,因此print
中是无法获取到a和b
的。
foo
虽然在obj
的bar
函数中,但foo
函数仍然是独立运行的,foo
中的this
依旧指向window
对象。
这个题与题目1.4
类似,但要注意,不要把它看成闭包问题
默认情况下,自执行函数的
this
指向window
自执行函数只要执行到就会运行,并且只会运行一次,this
指向window
。
函数的调用是在某个对象上触发的,即调用位置存在上下文对象,通俗点说就是**XXX.func()**这种调用模式。
此时func
的this
指向XXX
,但如果存在链式调用,例如XXX.YYY.ZZZ.func
,记住一个原则:this永远指向最后调用它的那个对象。
感觉上面总是空谈链式调用的情况,下面直接来看一个例题:
隐式绑定可是个调皮的东西,一不小心它就会发生绑定的丢失。一般会有两种常见的丢失:
隐式绑定丢失之后,this
的指向会启用默认绑定。
JavaScript
对于引用类型,其地址指针存放在栈内存中,真正的本体是存放在堆内存中的。
上面将obj.foo
赋值给foo
,就是将foo
也指向了obj.foo
所指向的堆内存,此后再执行foo
,相当于直接执行的堆内存的函数,与obj
无关,foo
为默认绑定。笼统的记,只要fn前面什么都没有,肯定不是隐式绑定。
不要把这里理解成
window.foo
执行,如果foo
为let/const
定义,foo
不会挂载到window
上,但不会影响最后的打印结果
如果取函数别名没有发生在全局,而是发生在对象之中,又会是怎样的结果呢?
用函数预编译的知识来解答这个问题:函数预编译四部曲前两步分别是:
undefined
obj.foo
作为实参,在预编译时将其值赋值给形参fn
,是将obj.foo
指向的地址赋给了fn
,此后fn
执行不会与obj
产生任何关系。fn
为默认绑定。
将上面的题略作修改,doFoo
不在window
上执行,改为在obj2
中执行
fn()
: 没有于obj2
产生联系,默认绑定,打印2
下面这个题目我们写代码时会经常遇到:
setTimeout
是异步调用的,只有当满足条件并且同步代码执行完毕后,才会执行它的回调函数。
所以如果我们想在setTimeout
或setInterval
中使用外界的this
,需要提前存储一下,避免this
的丢失。
本题目不做解析,具体可以参照上面的题目。
显式绑定比较好理解,就是通过call()、apply()、bind()
等方法,强行改变this
指向。
上面的方法虽然都可以改变this
指向,但使用起来略有差别:
bind()
函数会返回新函数,不会立即执行函数
foo.bind(obj)
: 显式绑定,但不会立即执行函数,没有返回值
题目3.4
发生隐式绑定的丢失,如下代码:我们可不可以通过显式绑定来修正这个问题。
接着上一个题目的风格,稍微变点花样:
乍一看上去,这个题看起来有些莫名其妙,setTimeout
那是传了个什么东西?
这样一看,本题就清楚多了,类似题目4.2
,修正了回调函数内fn
的this
指向。
上面由于foo
没有返回函数,无法执行call
函数报错,因此修改一下foo
函数,让它返回一个函数。
这里千万注意:最后一个foo().call(obj)
有两个函数执行,会打印2个值。
将上面的call
全部换做bind
函数,又会怎样那?
call是会立即执行函数,bind会返回一个新函数,但不会执行函数
首先我们要先确定,最后会输出几个值?bind
不会执行函数,因此只有两个foo()
会打印a
。
foo.bind(obj)
: 返回新函数,不会执行函数,无输出
做到这里,不由产生了一些疑问:如果使用call、bind
等修改了外层函数的this
,那内层函数的this
会受影响吗?
foo.call(obj)
: 第一层函数foo
通过call
将this
指向obj
,打印1
;第二层函数为匿名函数,默认绑定,打印2
。
把上面的代码移植到对象中,看看会发生怎样的变化?
看着这么多括号,是不是感觉有几分头大。没事,咱们来一层一层分析:
显式绑定一开始讲的时候,就谈过call/apply
存在传参差异,那咱们就来传一下参数,看看传完参数的this会是怎样的美妙。
要注意call
执行的位置:
obj.foo(a)
: foo的AO中b值为传入的a(形参与实参相统一),值为2,返回匿名函数fn
麻了吗,兄弟们。进度已经快过半了,休息一会,争取把this
一次性吃透。
上面提了很多call/apply
可以改变this
指向,但都没有太多实用性。下面来一起学几个常用的call与apply
使用。
日常编码中,我们会经常用到forEach、map
等,但这些数组高阶方法,它们还有第二个参数thisArg
,每一个回调函数都是显式绑定在thisArg
上的。
关于数组高阶函数的知识可以参考: JavaScript之手撕高阶数组函数
使用new
来构建函数,会执行如下四部操作:
JavaScript
对象(即{}
);
__proto__
,将该属性链接至构造函数的原型对象 ;
this
的上下文 ;
this
。
关于new更详细的知识,可以参考:
通过new来调用构造函数,会生成一个新对象,并且把这个新对象绑定为调用函数的this。
这个题很难不让人想到如下代码,都是函数嵌套,具体解法是类似的,可以对比来看一下啊。
new
界的天王山,每次看懂后,没过多久就会忘掉,但这次要从根本上弄清楚该题。
接下来一起来品味品味:
分析后面三个打印结果之前,先补充一些运算符优先级方面的知识(图源:)
从上图可以看到,部分优先级如下:new(带参数列表) = 成员访问 = 函数调用 > new(不带参数列表)
首先从左往右看:new Foo
属于不带参数列表的new(优先级19),Foo.getName
属于成员访问(优先级20),getName()
属于函数调用(优先级20),同样优先级遵循从左往右执行。
这里有一个误区:很多人认为这里的
new
是没做任何操作的的,执行的是函数调用。那么如果执行的是Foo.getName()
,调用返回值为undefined
,new undefined
会发生报错,并且我们可以验证一下该表达式的返回结果。
可见在成员访问之后,执行的是带参数列表格式的new操作。
步骤4
一样分析,先执行new Foo()
,返回一个以Foo
为构造函数的实例
从左往右分析: 第一个new不带参数列表(优先级19),new Foo()
带参数列表(优先级20),剩下的成员访问和函数调用优先级都是20
new Foo()
执行,返回一个以Foo
为构造函数的实例
通过这一步比较应该能更好的理解上面的执行顺序。
兄弟们,革命快要成功了,再努力一把,以后this都小问题啦。
箭头函数没有自己的this
,它的this
指向外层作用域的this
,且指向函数定义时的this
而非执行时。
this指向外层作用域的this
: 箭头函数没有this
绑定,但它可以通过作用域链查到外层作用域的this
指向函数定义时的this而非执行时
: JavaScript
是静态作用域,就是函数定义之后,作用域就定死了,跟它执行时的地方无关。更详细的介绍见。
上文说到,箭头函数的this
通过作用域链查到,intro
函数的上层作用域为window
。
箭头函数由于没有this
,不能通过callapplyind
来修改this
指向,但可以通过修改外层作用域的this
来达成间接修改
call
修改this
为obj2
,打印obj2
。第二层函数为箭头函数,它的this
与外层this
相同,同样打印obj2
。
this
,它的this
是通过作用域链查到外层作用域的this
,且指向函数定义时的this
而非执行时。
new
命令,否则会报错
arguments
对象,如果要用,使用rest
参数代替
yield
命令,因此箭头函数不能用作Generator
函数。
call/apply/bind
修改this
指向,但可以通过修改外层作用域的this
来间接修改。
箭头函数不能作为构造函数
DOM中事件的回调函数中this已经封装指向了调用元素,如果使用构造函数,其this会指向window对象
学完上面的知识,是不是感觉自己已经趋于化境了,现在就一起来华山之巅一决高下吧。
这个题目并不难,就是把上面很多题做了个整合,如果上面都学会了,此题问题不大。
突然出现了一个代码很少的题目,还乍有些不习惯。
(foo.bar)()
: 上面提到过运算符优先级的知识,成员访问与函数调用优先级相同,默认从左到右,因此括号可有可无,隐式绑定,打印20
(foo.bar, foo.bar)()
: 隐式绑定丢失,起函数别名,将逗号表达式的值(第二个foo.bar)赋值给新变量,之后执行新变量所指向的函数,默认绑定,打印10
。
上面那说法有可能有几分难理解,隐式绑定有个定性条件,就是要满足
XXX.fn()
格式,如果破坏了这种格式,一般隐式绑定都会丢失。
这个题要注意一下,有坑。
arguments[0]()
: 这种执行方式看起来就怪怪的,咱们把它展开来看看:
arguments[0]
: 这是访问对象的属性0?0不好理解,咱们把它稍微一换,方便一下理解:
到这里大家应该就懂了,隐式绑定,fn
函数this
指向arguments
,打印2
我们来一句一句的分析:
此时的obj可以类似的看成以下代码(注意存在闭包):
number *= 3
: 当前AO
中没有number
属性,沿作用域链可在立即执行函数的AO
中查到number
属性,修改其值为9
JavaScript采用的静态作用域,当定义函数后,作用域链就已经定死。(更详细的解释文章最开始的推荐中有)
this
指向全局对象,严格模式下this
会绑定到undefined
XXX.fn()
格式,fn
的this
指向XXX
。如果存在链式调用,this永远指向最后调用它的那个对象
new
绑定: 通过new
来调用构造函数,会生成一个新对象,并且把这个新对象绑定为调用函数的this
。
this
,它的this
是通过作用域链查到外层作用域的this
,且指向函数定义时的this
而非执行时
this到这里基本接近尾声了,松了一口气。
这篇文章写了好久,找资源,修改博文,各种乱七八糟的杂事,导致迟迟写不出满意的博文。有可能天生理科男的缘故吧,怎么写感觉文章都很生硬,但好在还是顺利写完了。
在文章的最后,感谢一下参考的博客和题目的来源
最后按照阿包惯例,附赠一道面试题:
最后祝大家都能学好前端,步步登神,成为大佬。
前些天去看了看已经更新到101题了,这些题目中已经有很多小伙伴贡献了中文翻译,我利用空闲时间也把剩余题目翻译完成并提交了 PullRequest
。
下面我们来看看都更新了哪些题目吧(本文由原作者授权翻译)!
如果你还没看过前面的43题,请点击这里:。我们直接从44题开始:
第二个 .then
中 res
的值等于前一个 .then
中的回调函数返回的值。你可以像这样继续链接 .then
,将值传递给下一个处理程序。
使用逻辑非运算符 !
,将返回一个布尔值,使用 !!name
,我们可以确定 name
的值是真的还是假的。如果 name
是真实的,那么 !name
返回 false
。!false
返回
newBoolean(true)
返回一个对象包装器,而不是布尔值本身。
name.length
返回传递的参数的长度,而不是布尔值 true
。
可以使用方括号表示法获取字符串中特定索引的字符,字符串中的第一个字符具有索引0,依此类推。在这种情况下,我们想要得到索引为0的元素,字符 'I'
被记录。
请注意,IE7及更低版本不支持此方法。在这种情况下,应该使用 .charAt()
您可以将默认参数的值设置为函数的另一个参数,只要另一个参数定义在其之前即可。我们将值 10
传递给 sum
函数。如果 sum
函数只接收1个参数,则意味着没有传递 num2
的值,这种情况下, num1
的值等于传递的值
如果您尝试将默认参数的值设置为后面定义的参数,则可能导致参数的值尚未初始化,从而引发错误。比如:
module.js
文件中,有两个导出:默认导出和命名导出。默认导出是一个返回字符串“Hello World”的函数,命名导出是一个名为 name
的变量,其值为字符串 “Lydia”
。
data
对象具有默认导出的 default
属性,其他属性具有指定exports的名称及其对应的值。
类是构造函数的语法糖,如果用构造函数的方式来重写 Person
类则将是:
通过 new
来调用构造函数,将会生成构造函数 Person
的实例,对实例执行 typeof
关键字将返回 "object"
,上述情况打印出 "object"
。
Object.entries()
方法返回一个给定对象自身可枚举属性的键值对数组,上述情况返回一个二维数组,数组每个元素是一个包含键和值的数组:
使用 for-of
循环,我们可以迭代数组中的每个元素,上述情况是子数组。我们可以使用 const[x,y]
在 for-of
循环中解构子数组。x
等于子数组中的第一个元素, y
等于子数组中的第二个元素。
...args
是剩余参数,剩余参数的值是一个包含所有剩余参数的数组,并且只能作为最后一个参数。上述示例中,剩余参数是第二个参数,这是不可能的,并会抛出语法错误。
在JavaScript中,我们不必显式地编写分号( ;
),但是JavaScript引擎仍然在语句之后自动添加分号。这称为自动分号插入。例如,一个语句可以是变量,或者像 throw
、 return
、 break
这样的关键字。
在这里,我们在新的一行上写了一个 return
语句和另一个值 a+b
。然而,由于它是一个新行,引擎并不知道它实际上是我们想要返回的值。相反,它会在 return
后面自动添加分号。你可以这样看:
这意味着永远不会到达 a+b
,因为函数在 return
关键字之后停止运行。如果没有返回值,就像这里,函数返回 undefined
。注意,在 if/else
语句之后没有自动插入!
我们可以将类设置为等于其他类/函数构造函数。在这种情况下,我们将 Person
设置为 AnotherPerson
。这个构造函数的名字是 Sarah
,所以新的 Person
实例 member
上的name属性是 Sarah
。
Symbol
类型是不可枚举的。Object.keys
方法返回对象上的所有可枚举的键属性。Symbol
类型是不可见的,并返回一个空数组。记录整个对象时,所有属性都是可见的,甚至是不可枚举的属性。
这是 Symbol
的众多特性之一:除了表示完全唯一的值(防止对象意外名称冲突,例如当使用2个想要向同一对象添加属性的库时),您还可以 隐藏
这种方式对象的属性(尽管不完全。你仍然可以使用 Object.getOwnPropertySymbols()
方法访问 Symbol
。
getList
函数接收一个数组作为其参数。在 getList
函数的括号之间,我们立即解构这个数组。您可以将其视为:
使用剩余的参数 ...y
,我们将所有剩余参数放在一个数组中。在这种情况下,其余的参数是 2
, 3
和 4
。y
的值是一个数组,包含所有其余参数。在这种情况下, x
的值等于 1
,所以当我们打印
getUser
函数接收一个对象。对于箭头函数,如果只返回一个值,我们不必编写花括号。但是,如果您想从一个箭头函数返回一个对象,您必须在圆括号之间编写它,否则不会返回任何值!下面的函数将返回一个对象:
由于在这种情况下不返回任何值,因此该函数返回 undefined
。
变量 name
保存字符串的值,该字符串不是函数,因此无法调用。
当你编写了一些非有效的JavaScript时,会抛出语法错误,例如当你把 return
这个词写成 retrun
时。当JavaScript无法找到您尝试访问的值的引用时,抛出 ReferenceErrors
。
[]
是一个真值。使用 &&
运算符,如果左侧值是真值,则返回右侧值。在这种情况下,左侧值 []
是一个真值,所以返回 Im
。
""
是一个假值。如果左侧值是假的,则不返回任何内容。n't
不会被退回。
使用 ||
运算符,我们可以返回第一个真值。如果所有值都是假值,则返回最后一个值。
(false||{}||null)
:空对象 {}
是一个真值。这是第一个(也是唯一的)真值,它将被返回。one
等于 {}
。
(null||false||“”)
:所有值都是假值。这意味着返回传递的值 ""
。two
等于 ""
。
([]||0||“”)
:空数组 []
是一个真值。这是第一个返回的真值。three
等于 []
。
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。