__proto__是什么?咱们在这里简单地说下。每一个对象都会在其内部初始化一个属性,就是__proto__,当咱们访问一个对象的属性 时,若是这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有本身的__proto__,因而就这样 一直找下去,也就是咱们平时所说的原型链的概念。
<script type="text/javascript"> var Person = function () { }; var p = new Person(); </script>
很简单的一段代码,咱们来看看这个new究竟作了什么?咱们能够把new的过程拆分红如下三步:
<1> var p={}; 也就是说,初始化一个对象p。
<2> p.__proto__=Person.prototype;
<3> Person.call(p);也就是说构造p,也能够称之为初始化p。
<script type="text/javascript"> var Person = function () { }; Person.prototype.Say = function () { alert("Person say"); } var p = new Person(); p.Say(); </script>
这段代码很简单,相信每一个人都这样写过,那就让咱们看下为何p能够访问Person的Say。
首先var p=new Person();能够得出p.__proto__=Person.prototype。那么当咱们调用p.Say()时,首先p中没有Say这个属性, 因而,他就须要到他的__proto__中去找,也就是Person.prototype,而咱们在上面定义了 Person.prototype.Say=function(){}; 因而,就找到了这个方法。
好,接下来,让咱们看个更复杂的。
<script type="text/javascript"> var Person = function () { }; Person.prototype.Say = function () { alert("Person say"); } Person.prototype.Salary = 50000; var Programmer = function () { }; Programmer.prototype = new Person(); Programmer.prototype.WriteCode = function () { alert("programmer writes code"); }; Programmer.prototype.Salary = 500; var p = new Programmer(); p.Say(); p.WriteCode(); alert(p.Salary); </script>
咱们来作这样的推导:
var p=new Programmer()能够得出p.__proto__=Programmer.prototype;
而在上面咱们指定了Programmer.prototype=new Person();咱们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:
p1.__proto__=Person.prototype;
Programmer.prototype.__proto__=Person.prototype;
由根据上面获得p.__proto__=Programmer.prototype。能够获得p.__proto__.__proto__=Person.prototype。
好,算清楚了以后咱们来看上面的结果,p.Say()。**因为p没有Say这个属性,因而去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,因为p1中也没有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,因而就找到了alert(“Person say”)的方法。**
其他的也都是一样的道理。
这也就是原型链的实现原理。
最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助做用,换句话说,他只是在new的时候有着必定的价值,而原型链的本质,其实在于__proto__!
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
简单来说,就是移动端视口分为可见视口(也就是咱们手机屏幕的大小),layout视口(也就是真实的页面的布局大小),理想视口(就是布局视口就等于可见视口)用户经过缩放等浏览可见视口与布局视口不等的页面来查看内容。
具体文章参照:
移动前端开发之viewport的深刻理解javascript
PC 时代为了突破浏览器的域名并发限制。有了域名发散。 浏览器有并发限制,是为了防止DDOS攻击。 域名收敛:就是将静态资源放在一个域名下。减小DNS解析的开销。 域名发散:是将静态资源放在多个子域名下,就能够多线程下载,提升并行度,使客户端加载静态资源更加迅速。 域名发散是pc端为了利用浏览器的多线程并行下载能力。而域名收敛多用与移动端,提升性能,由于dns解析是是从后向前迭代解析,若是域名过多性能会降低,增长DNS的解析开销。
参考文章:
域名收敛css
共性:均可以使元素处于同一行,而且使元素为块元素,能够自由设置宽高;
不一样:
float:脱离文档流;呈环绕排列;上行有空白则后续元素会尽力去填补上;相同元素float:right时,在前面的元素先解析,因此显示上反而在后面的元素右边;
inline-block:在文档流中。行排列不会补位;
首选inline-block,不改变文档流,避免dom重绘;
参考文章:
inline-block和float的共性和区别html
github:前端优化策略前端
白屏时间指的是浏览器开始显示内容的时间。所以咱们只须要知道是浏览器开始显示内容的时间点,即页面白屏结束时间点便可获取到页面的白屏时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白屏</title>
<script type="text/javascript"> // 不兼容performance.timing 的浏览器,如IE8 window.pageStartTime = Date.now(); </script>
<!-- 页面 CSS 资源 -->
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="page.css">
<script type="text/javascript"> // 白屏时间结束点 window.firstPaint = Date.now(); </script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
白屏时间 = firstPaint - performance.timing.navigationStart;
首屏时间:这个比较复杂,具体看文章:
首屏时间计算vue
阮一峰:闭包java
做用域链jquery
w3c上面讲解得不要太清晰:
AJAX的实现原理以及封装
ajax简单封装linux
ajax简单封装
该封装不依赖jquery,添加了jsonp功能;android
跨域的八种方法webpack
http请求头,请求体,cookie在哪一个里面?url在哪里面?
http
对闭包的理解,实现一个暴露内部变量,并且外部能够访问修改的函数
var obj = {
a:1,
setA:function(a){
var that = this;
return function(a){
return that.a =a;
}
},
getA:function(){
return this.a;
}
}
console.log(obj.setA()(4))//4
console.log(obj.getA())//4
深刻理解this与闭包:
闭包与return
this
闭包
重点理解这:
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());//window
代码片断二。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());//my object
xss:用户过度信任网站,听任来自浏览器地址栏表明的那个网站代码在本身本地任意执行。若是没有浏览器的安全机制限制,xss代码能够在用户浏览器随心所欲; csrf:网站过度信任用户,听任来自所谓经过访问控制机制的表明合法用户的请求执行网站的某个特定功能。
lable for属性的用法:
点击文字label同时选中checkbox radio
jquery的delegate实现原理
addEventListener,jq.on以及事件委托
http状态码,200,500,301,302,304
三次握手
框架原理:
关于html,css,js三者的加载顺序问题
关于html,css,js三者的加载顺序问题
css,js位置放置
http协议:
前端面试常见题目:
2016十家公司前端面试小记
js手写一个排序算法动态排序的动画:
垂直居中:
待总结
自适应布局
unix中经常使用的命令行
OSI模型,HTTP,TCP,UDP分别在哪些层
tcp udp http 多了解下各层协议及其做用
八大排序算法
手写一个jQuery插件
jquery编写插件的方法
区别和详解:jQuery extend()和jQuery.fn.extend()
jquery对象的实现(return new jQuery.fn.init)
arguments.callee
递归调用匿名函数:
function creat(){
return function(n){
if(n<1){ return 1 }
return n*arguments.callee(n-1)
}
}
对比有名字的函数递归:
function factorial (n) {
return !(n > 1) ? 1 : factorial(n - 1) * n;
}
[1,2,3,4,5].map(factorial);
对前端路由的理解?先后端路由的区别?
前端路由与后端路由
gulp/grunt/webpack对比
待对比
es6
这里写连接内容