__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的深入理解
PC 时代为了突破浏览器的域名并发限制。有了域名发散。
浏览器有并发限制,是为了防止DDOS攻击。
域名收敛:就是将静态资源放在一个域名下。减少DNS解析的开销。
域名发散:是将静态资源放在多个子域名下,就可以多线程下载,提高并行度,使客户端加载静态资源更加迅速。
域名发散是pc端为了利用浏览器的多线程并行下载能力。而域名收敛多用与移动端,提高性能,因为dns解析是是从后向前迭代解析,如果域名过多性能会下降,增加DNS的解析开销。
参考文章:
域名收敛
共性:都可以使元素处于同一行,并且使元素为块元素,可以自由设置宽高;
不同:
float:脱离文档流;呈环绕排列;上行有空白则后续元素会尽力去填补上;相同元素float:right时,在前面的元素先解析,所以显示上反而在后面的元素右边;
inline-block:在文档流中。行排列不会补位;
首选inline-block,不改变文档流,避免dom重绘;
参考文章:
inline-block和float的共性和区别
github:前端优化策略
白屏时间指的是浏览器开始显示内容的时间。因此我们只需要知道是浏览器开始显示内容的时间点,即页面白屏结束时间点即可获取到页面的白屏时间。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白屏title>
<script type="text/javascript">
// 不兼容performance.timing 的浏览器,如IE8
window.pageStartTime = Date.now();
script>
<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;
首屏时间:这个比较复杂,具体看文章:
首屏时间计算
阮一峰:闭包
作用域链
w3c上面讲解得不要太清晰:
AJAX的实现原理以及封装
ajax简单封装
ajax简单封装
该封装不依赖jquery,添加了jsonp功能;
跨域的八种方法
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
事件模型
一步一步实现js拖拽插件
xss:用户过分信任网站,放任来自浏览器地址栏代表的那个网站代码在自己本地任意执行。如果没有浏览器的安全机制限制,xss代码可以在用户浏览器为所欲为;
csrf:网站过分信任用户,放任来自所谓通过访问控制机制的代表合法用户的请求执行网站的某个特定功能。
xss和crsf的原理
css优先级
lable for属性的用法:
点击文字label同时选中checkbox radio
jquery的delegate实现原理
addEventListener,jq.on以及事件委托
cache-control
http-only
从输入URL到页面加载发生了什么
vue与angular的区别
angular和vue的对比
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
这里写链接内容