前端面试花絮2017-4-13更新

时间：2023-03-31 12:54:32 CSS

浏览器的核心是什么？IE:tridentkernelFirefox:geckokernelSafari:webkitkernelOpera:以前是prestokernel，Opera现在已经切换到GoogleChrome的BlinkkernelChrome:Blink(基于webkit,Google和OperaSoftware共同开发)null有什么区别和未定义？(1)null表示“没有对象”，即那里应该没有值。典型的用法是：①作为函数的参数，表示函数的参数不是对象。②作为对象原型链的终点。(2)undefined表示“缺失值”，即这里应该有一个值，但是还没有定义。典型的用法是：①当变量被声明但没有被赋值时，等于undefined。②函数调用时，该提供的参数没有提供，参数等于undefined。③对象没有赋值属性，该属性的值未定义。④当函数没有返回值时，默认返回undefined。简述src和href的区别。href指向网络资源的位置，与当前元素（锚点）或当前文档（链接）建立链接，用于超链接。当src指向外部资源位置时，指向的内容将被嵌入到文档中的当前标签位置；当请求src资源时，它指向的资源将被下载并应用到文档中，例如js脚本、img图片和frame元素。当浏览器解析到这个元素时，会暂停其他资源的下载和处理，直到该资源被加载、编译和执行。图片、框架等元素也是如此，类似于将指向的资源嵌入到当前标签中。这就是为什么js脚本放在底部而不是放在头部的原因。HTML中引入CSS的方法内联样式就是在标签的style属性中设置CSS样式。这种方式没有体现CSS的优势，不推荐使用。我是行内样式

内嵌内嵌就是标签对齐。格式如下：...在这里写CSS样式缺点是对于包含很多网页的网站，嵌入，它修改样式很麻烦。单个网页可以考虑使用嵌入式。导入类型将一个独立的.css文件导入到HTML文件中。导入类型使用CSS规则导入外部CSS文件。import类型会在整个网页加载完成后加载css文件，所以这就导致了一个问题，如果网页比较大，过一段时间后，unstyled页面将首先出现，然后网页的样式会在一闪后出现。这是进口产品固有的缺陷。链接类型也是在HTML文件中引入一个.css文件，但与导入类型不同的是，链接类型使用HTML规则导入外部CSS文件，在>导入外部样式表文件的网页标签的标签对，使用语法如下：使用链接时type，它与importtype不同的是，它会在网页文件主体加载之前加载CSS文件，所以展示的网页一开始就被样式化了。它不会先显示无样式的网页，然后像导入类型一样显示有样式的网页。这就是链接类型的优势。如何防止DOM元素显示在浏览器可视范围内？最基本的：setdisplay:none;或可见性：隐藏；技巧：设置宽度和高度为0，透明度为0，设置z-index：-1000px；display:none和visibility:hidden之间的区别？是否是继承属性：display不是继承属性，visibility是继承属性。如果后代元素的可见性属性存在，则不会被继承。如果不存在，则继承父元素的visibility的值，也就是说：父元素的visibility是隐藏的，但是子元素的visibility是可见的，如果元素的visibility是可见的，那么子元素还是可见的，如果visibilityofthechildelementdoesnotexist，子元素不可见。元素的display属性设置为none，整个子树不可见。是否占用空间：使用display:none，渲染文档时，该元素不存在（但文档对象模型树中仍然存在）；并使用visibility:hidden，它占用的空间将被空白占用。即一个(display:none)不会出现在渲染树中，一个(visibility:hidden)会出现。改变相关页面属性的值后是否重新渲染：visibility:hidden不渲染；display:none渲染px、em、rem之间的区别？px和em都是长度单位。不同点：px的值是固定的，想写多少就写多少，计算起来也很容易。em的值不固定，em继承父元素的字体大小。rem是CSS3新引入的度量单位。rem是相对于根元素的，也就是说我们只需要在根元素中确定一个引用值，在根元素中设置字体大小即可。这个可以根据自己的需要来做。简述盒子模型盒子模型：内容、内边距、外边距、边框DOCTYPE的作用？严格模式和混杂模式有什么区别？DOCTYPE声明位于文档的顶部，在标记之前。告诉浏览器的解析器使用什么文档类型规范来解析这个文档。在标准模式下，浏览器以其支持的最高标准呈现页面；在混杂模式下，页面以更宽松的向后兼容方式显示。混杂模式通常模仿旧浏览器的行为以防止旧站点工作。javascript这个用法？情况一：纯函数调用这是函数最常见的用法，是全局调用，所以this代表的是全局对象Global。请看下面这段代码，其运行结果为1。　　functiontest(){　　　　this.x=1;　　　　警报（this.x）；　　}　　测试（）；//1为了证明这是全局对象，我对代码做了一些改动：　　varx=1;　　函数测试(){　　　　alert(this.x);　　}　　测试（）；//1次运算结果还是1，再改一下：　　varx=1;　　函数测试(){　　　　this.x=0;　　}　　测试（）；　　警报（x）；//0　　情况2：作为对象方法的调用函数也可以作为对象的方法调用，this指的是上级对象。　　函数测试(){　　　　alert(this.x);　　}　　varo={};　　o.x=1;　　o.m=测试；　　o.m();//1　　Case3调用构造函数所谓的constructor就是通过这个函数生成一个新的对象。这时，this指的是新对象。　　函数测试(){　　　　this.x=1;　　}　　varo=newtest();　　警报（o.x）；//1运行结果为1，为了表明此时这不是全局对象，我对代码做了一些改动：　　varx=2;　　函数测试(){　　　　this.x=1;　　}　　varo=newtest();　　警报（x）；//2运行结果为2，说明全局变量x的值完全没有变化。情况4Apply调用apply()，是函数对象的一个??方法。它的作用是改变函数的调用对象，它的第一个参数表示调用这个函数的改变对象。因此，this指的是第一个参数。　　varx=0;　　函数测试(){　　　　alert(this.x);　　}　　varo={};　　o.x=1;=测试；　　o.m.apply();//当0apply()的参数为空时，默认调用全局对象。所以，此时的运行结果为0，证明this指的是全局对象。如果最后一行代码改成　　o.m.apply(o)；//1，运行结果变为1，证明this代表对象o。JavaScript是如何实现继承的？1.结构继承法；2.原型继承法；3.实例继承方式；JavaScript深入从原型到原型链JavaScript深入系列第一篇，从原型到原型链，想知道构造函数实例的原型，原型的原型，原型关于原型，什么是原型原型，看看这篇文章就知道了。构造函数创建一个对象让我们首先使用构造函数创建一个对象：functionPerson(){}varperson=newPerson();person.name='凯文';console.log(person.name)//本例中的Kevin，Person是一个构造函数，我们使用new创建了一个实例对象person。很简单，进入正题：prototype每个函数都有一个prototype属性，也就是我们在各种例子中经常看到的prototype，比如：functionPerson(){}//虽然注释里写了，但是You应该注意：//prototype是函数的属性Person.prototype.name='Kevin';varperson1=newPerson();varperson2=newPerson();console.log(person1.name)//Kevinconsole.log(person2.name)//Kevin，这个函数的原型属性到底指向什么？是这个函数的原型吗？实际上，该函数的prototype属性指向一个对象，该对象是调用构造函数创建的实例的原型，即本例中person1和person2的原型。那么什么是原型呢？你可以这样理解：每个JavaScript对象（null除外）在创建时都会与另一个对象相关联。这个对象就是我们所说的原型，每个对象都会“继承”原型的属性。让我们用一张图来表示构造函数和实例原型之间的关系：在这张图中我们使用Object.prototype来表示实例原型。那么我们如何表达实例与实例原型的关系，即person与Person.prototype的关系呢？这时候我们就要说到第二个属性：_proto_这是每个JavaScript对象（null除外）都有的一个属性，叫做__proto__，这个属性会指向对象的原型。为了证明这一点，我们可以在Firefox或Google中输入：functionPerson(){}varperson=newPerson();console.log(person.__proto__===Person.prototype);//truesoweupdateRelationshipdiagram:由于实例对象和构造函数都可以指向原型，那么原型是否具有指向构造函数或实例的属性？构造函数不指向实例，因为一个构造函数可以生成多个实例，但是有原型指向构造函数。这就是第三个属性：constructor。每个原型都有一个指向关联构造函数的构造函数属性。.为了验证这一点，我们可以尝试：functionPerson(){}console.log(Person===Person.prototype.constructor);//正确，所以更新关系图：总之，我们得出结论：functionPerson(){}varperson=newPerson();console.log(person.__proto__==Person.prototype)//trueconsole.log(Person.prototype.constructor==Person)//true//顺便学一个ES5方法，可以得到console对象的原型...，如果找不到，它会在与对象关联的原型中寻找属性。如果还没有找到，它会寻找原型的原型，直到找到最顶层。例如：functionPerson(){}Person.prototype.name='Kevin';varperson=newPerson();person.name='雏菊';console.log(person.name)//Daisydeleteperson.name;console.log(person.name)//Kevin在这个例子中，我们给实例对象person添加了name属性，当我们打印person.name时，结果自然是黛西。但是当我们删除person的name属性，读取person.name，如果person对象中没有找到name属性，就会从person的原型中查找，也就是person.__proto__，也就是Person.prototype。幸运的是，我们找到了name属性，原来是Kevin。但是，如果还没有找到呢？原型的原型是什么？原型的原型在前面。我们已经说过原型也是一个对象。既然是对象，那么我们可以用最原始的方式来创建，即：varobj=newObject();obj.name='凯文';console.log(obj.name)//Kevin所以原型对象是通过Object构造函数生成的。结合前面说的，实例的_proto_指向了构造函数的原型，那么更新一下关系图：PrototypechainthatObject.原型的原型呢？null，如果你不相信我，我们可以打印：console.log(Object.prototype.__proto__===null)//true所以当你找到属性时，你可以找到Object.prototype并且你可以停止搜索。所以最后一张关系图就顺带一提了。图中由相互关联的原型组成的链式结构就是原型链，也就是蓝线。补充最后补充三点大家可能没有注意的：constructor首先是constructor属性，我们来看一个例子：functionPerson(){}varperson=newPerson();console.log(person.constructor===Person);//true获取person.constructor时，person中其实没有constructor属性。当constructor属性无法读取时，会从person的原型中读取，也就是Person.prototype，正好存在于prototype中。所以：person.constructor===Person.prototype.constructor_proto_后跟_proto_，大部分浏览器都支持这种访问原型的非标准方法，但是在Person.prototype中是不存在的，实际上，它来自于Object。原型。它与其说是一个属性，不如说是一个getter/setter。使用obj._proto_时，可以理解为返回Object.getPrototypeOf(obj)。真的是继承吗？最后，是关于继承。我们之前说过“每个对象都会‘继承’原型的属性”。其实继承是一个很容易混淆的说法。引用《你不知道的JavaScript》的话就是：继承就是复制操作，但是JavaScript默认不会复制对象的属性。相反，JavaScript只是在两个对象之间建立关联，使一个对象可以通过委托访问另一个对象的属性和功能，所以与其称之为继承，不如称其为委托，反而更准确。=========================================待更新=============================================

上一篇：ES6的块级作用域

下一篇：从浏览器输入url到发起http请求的过程

前端面试花絮2017-4-13更新相关文章