发表于 | 分类于

Js中Prototype、proto、Constructor、Object、Function关系介绍

一 Prototype、proto与Object、Function关系介绍

  • Function、Object：Js自带的函数对象。
  • prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(Function.prototype函数对象是个例外，没有prototype属性)。
  • proto:每个对象都有一个名为proto的内部隐藏属性，指向于它所对应的原型对象(chrome、firefox中名称为proto，并且可以被访问到)。原型链正是基于proto才得以形成(note：不是基于函数对象的属性prototype)。

关于上面提到的函数对象，我们来看以下例子，来说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var o1 = {};
var o2 =new Object();

function f1(){}
var f2 = function(){}
var f3 = new Function('str','console.log(str)');
    
f3('aabb');   // aabb
console.log('typeof Object:'+typeof Object);            //function
console.log('typeof Function:'+typeof Function);        //function
console.log('typeof o1:'+typeof o1);   //object
console.log('typeof o2:'+typeof o2);   //object
console.log('typeof f1:'+typeof f1);   //function
console.log('typeof f2:'+typeof f2);   //function
console.log('typeof f3:'+typeof f3);   //function
  • 通常我们认为o1、o2是对象，即普通对象；f1、f2、f3为函数。
  • 但是其实函数也是对象，是由Function构造的，
  • f3这种写法就跟对象的创建的写法一样。f1、f2最终也都像f3一样是有Function这个函数构造出来的
  • f1、f2、f3为函数对象，Function跟Object本身也是函数对象。

Js中每个对象(null除外)都和另一个对象相关联，通过以下例子跟内存效果图来分析Function、Object、Prototype、proto对象间的关系。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function Animal(){
    
}
var  anim = new Animal();

console.log('***********Animal anim proto*****************');
console.log('typeof Animal.prototype:' +typeof Animal.prototype);  //object 
console.log('anim.__proto__===Animal.prototype:'+(anim.__proto__===Animal.prototype));  //true
console.log('Animal.__proto__===Function.prototype:'+(Animal.__proto__===Function.prototype));  //true
console.log('Animal.prototype.__proto__===Object.prototype:'+(Animal.prototype.__proto__===Object.prototype));  //true

console.log('***********Function proto*****************');
console.log('typeof Function.prototype:'+typeof Function.prototype);  //function
console.log('typeof Function.__proto__:'+typeof Function.__proto__);  //function
console.log('typeof Function.prototype.prototype:'+typeof Function.prototype.prototype); //undefined
console.log('typeof Function.prototype.__proto__:'+typeof Function.prototype.__proto__);   //object
console.log('Function.prototype===Function.__proto__:'+(Function.prototype===Function.__proto__)); //true

console.log('***********Object proto*****************');
console.log('typeof Object.prototype:'+typeof Object.prototype);  //object
console.log('typeof Object.__proto__:'+typeof Object.__proto__);  //function
console.log('Object.prototype.prototype:'+Object.prototype.prototype);  //undefied
console.log('Object.prototype.__proto__===null:'+(Object.prototype.__proto__===null));  //null

console.log('***********Function Object  proto关系*****************');
console.log('Function.prototype===Object.__proto__:'+(Function.prototype===Object.__proto__));   //true
console.log('Function.__proto__===Object.__proto__:'+(Function.__proto__===Object.__proto__));   //true
console.log('Function.prototype.__proto__===Object.prototype:'+(Function.prototype.__proto__===Object.prototype));   //true

/********************* 系统定义的对象Array、Date ****************************/
console.log('**************test Array、Date****************');      
var array = new Array();
var date = new Date();
console.log('array.__proto__===Array.prototype:'+(array.__proto__===Array.prototype));   //true
console.log('Array.__proto__===Function.prototype:'+(Array.__proto__===Function.prototype));  //true
console.log('date.__proto__===Date.prototype:'+(date.__proto__===Date.prototype));    //true
console.log('Date.__proto__===Function.prototype:'+(Date.__proto__===Function.prototype));     //true

image
image

通过上图Function、Object、Prototype关系图中，可以得出一下几点：
  • 所有对象所有对象，包括函数对象的原型链最终都指向了Object.prototype，而Object.prototype.proto===null，原型链至此结束。
  • Animal.prototype是一个普通对象。
  • Object是一个函数对象，也是Function构造的，Object.prototype是一个普通对象。
  • Object.prototype.type指向null。
  • Function.prototype是一个函数对象，前面说函数对象都有一个显示的prototype属性，但是Function.prototype却没有prototype属性，即Function.prototype.prototype===undefined，所有Function.prototype函数对象是一个特例，没有prototype属性。
  • Object虽是Function构造的一个函数对象，但是Object.prototype没有指向Function.prototype，即Object.prototype!==Function.prototype。

二 Prototype跟Constructor关系介绍

在 JavaScript 中，每个函数对象都有名为“prototype”的属性(上面提到过Function.prototype函数对象是个例外，没有prototype属性)，用于引用原型对象。此原型对象又有名为“constructor”的属性，它反过来引用函数本身。这是一种循环引用（i.e.Animal.prototype.constructor===Animal）。

通过以下例子跟内存效果图来分析Prototype、constructor间的关系。

1
2
3
4
5
6
7
8
9
10
console.log('**************constructor****************'); 

  console.log('anim.constructor===Animal:'+(anim.constructor===Animal))    ;    //true
  console.log('Animal===Animal.prototype.constructor:'+(Animal===Animal.prototype.constructor))    ;    //true
  console.log('Animal.constructor===Function.prototype.constructor:'+(Animal.constructor===Function.prototype.constructor));   //true
  console.log('Function.prototype.constructor===Function:'+(Function.prototype.constructor===Function));    //true
  console.log('Function.constructor===Function.prototype.constructor:'+(Function.constructor===Function.prototype.constructor));    //true

  console.log('Object.prototype.constructor===Object:'+(Object.prototype.constructor===Object));    //true
  console.log('Object.constructor====Function:'+(Object.constructor===Function));    //true

image

  • 注意Object.constructor===Function；本身Object就是Function函数构造出来的
  • 如何查找一个对象的constructor，就是在该对象的原型链上寻找碰到的第一个constructor属性所指向的对象。

发表于 | 分类于
驼峰命名法:

第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母，例如：==myFirstName==、==myLastName==，这样的变量名看上去就像骆驼峰一样此起彼伏，故得名。

小驼峰法:

变量一般用小驼峰法标识。驼峰法的意思是：除第一个单词之外，其他单词首字母大写。譬如==int myStudentCount==;变量==myStudentCount==第一个单词是全部小写，后面的单词首字母大写。

大驼峰法:

相比小驼峰法，大驼峰法把第一个单词的首字母也大写了。常用于类名，函数名，属性，命名空间。譬如
==public class DataBaseUser==;

发表于 | 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
	
	var name='hello';
	var id=2;
	function fun1(cb) {
		setTimeout(function() {
			cb(name);//固定了
		},1000);
	}
	fun1(
		function(a,b) {
	    	        console.log(a)//hello
			console.log(b)//undefined
			console.log(arguments.length);
		}
	);
		
</script>

发表于 | 分类于
  1. 放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？

在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。

2.下面这个JS程序的输出是什么：

1
2
3
4
5
6
7
8
9
10
11
12
function Foo() {
    var i = 0;
    return function() {
        console.log(i++);
    }
}
 
var f1 = Foo(),
    f2 = Foo();
f1();
f1();
f2();

++0 1 2++

3.权重 ：内联 权重1000 ， ID 选择器 权重：100， 类 伪类 属性选择器 权重：10 ，类型选择器 权重：1 除!important ，内联权重最大！

3.hasOwnProperty.isPrototypeOf

hasOwnProperty： 是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。
isPrototypeOf : 是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。

4.if(! “a” in window){
var a = 1;
}
alert(a);
请问 a 的结果是什么？

undefined

5.状态码

HTTP状态码分类
1 信息，服务器收到请求，需要请求者继续执行操作
2 成功，操作被成功接收并处理
3 重定向，需要进一步的操作以完成请求
4 客户端错误，请求包含语法错误或无法完成请求
5** 服务器错误，服务器在处理请求的过程中发生了错

HTTP状态码列表
200 OK 请求成功。一般用于GET与POST请求
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向
404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置”您所请求的资源无法找到”的个性页面
500 Internal Server Error 服务器内部错误，无法完成请求

  1. js七种数据类型：Sting Object null undefined Array Boolean Number
    js五种基本类型：String Boolean Number null undefined
    typeof六种返回格式：’string’ ‘number’ ‘object’ ‘function’ ‘boolean’ ‘undefined’

7.null == undefined 在 ===就不等了

  1. 在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。
    表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；
    非表单元素包括：连接（a），div,table,span等。
    所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
    有窗口元素包括：select元素，object元素，以及frames元素等等。
    无窗口元素：大部分html元素都是无窗口元素。
  1. 第一次答的时候就不知道什么是文档流，然后查了下才知道；
    在css的定位机制有三种，分别是1：文档流，2：浮动（float），3定位（position）
    其中文档流的意义就是按照HTML里面的写法就是从上到下，从左到右的排版布局;
    在4答案选项中的属性，float（浮动）和position（定位）了
    A：position: absolute;
    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；都绝对定位了，肯定脱离了文档流。。
    B:position: fixed;
    生成绝对定位的元素，相对于浏览器窗口进行定位;相对于浏览器了，也和正常顺序排下来没什么关系。。
    C:position: relative;
    生成相对定位的元素，相对于其正常位置进行定位。生成相对定位，也就是说还在原本的上下左右之间，上下左右的元素都不变，so这个没有能脱离文档流。。就这个了
    D:float: left;都浮动出去了，还上哪保持原位置去。。

发表于 | 分类于
  • .* 是贪婪模式
  • .*? 是勉强模式
  • .*+ 是侵占模式

以下是我对这几个模式的理解：

假定要分析的字符串是xfooxxxxxxfoo
模式.foo （贪婪模式）:
模式分为子模式p1(.)和子模式p2(foo)两个部分. 其中p1中的量词匹配方式使用默认方式(贪婪型)。 匹配开始时,吃入所有字符xfooxxxxxx去匹配子模式p1。匹配成功,但这样以来就没有了字符串去匹配子模式p2。本轮匹配失败；第二轮：减少p1部分的匹配量，吐出最后一个字符, 把字符串分割成xfooxxxxxxfo和o两个子字符串s1和s2。 s1匹配p1, 但s2不匹配p2。本轮匹配失败；第三轮，再次减少p1部分匹配量，吐出两个字符, 字符串被分割成xfooxxxxxxfo和oo两部分。结果同上。第四轮，再次减少p1匹配量, 字符串分割成xfooxxxxxx和foo两个部分, 这次s1/s2分别和p1/p2匹配。停止尝试,返回匹配成功。

模式.*?foo （勉强模式）:

最小匹配方式。第一次尝试匹配, p1由于是0或任意次，因此被忽略，用字符串去匹配p2,失败；第二次，读入第一个字符x, 尝试和p1匹配, 匹配成功; 字符串剩余部分fooxxxxxxfoo中前三个字符和p2也是匹配的. 因此, 停止尝试, 返回匹配成功。在这种模式下，如果对剩余字符串继续去寻找和模式相匹配的子字符串，还会找到字符串末尾的另一个xfoo，而在贪婪模式下，由于第一次匹配成功的子串就已经是所有字符，因此不存在第二个匹配子串。

模式.*+foo （侵占模式）:

也叫占用模式。匹配开始时读入所有字符串, 和p1匹配成功, 但没有剩余字符串去和p2匹配。因此, 匹配失败。返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
'xfooxxxxxxfoo'.match(/.*foo/g)
["xfooxxxxxxfoo"]

'xfooxxxxxxfoo'.match(/.*?foo/g)
["xfoo", "xxxxxxfoo"]

'xfooxxxxxxfoo'.match(/.*+foo/)
报错

'232hjdhfd7474$'.match(/\w+[a-z]/g)
["232hjdhfd"]

'232hjdhfd7474$'.match(/\w++[a-z]/g)
报错

发表于 | 分类于

百分比单位

乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width

乘以包含块的高度 top, bottom, height, max-height, min-height

关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。对固定定位的元素，它的包含块是视口（viewport）。具体可以参考 W3Help。

乘以元素的字体大小 line-height

乘以元素的行高 vertical-align

背景定位中的百分比 background-position 分别设置水平方向和垂直方向上的两个值，如果使用百分比，那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的（50%, 50%）这一点与框的（50%, 50%）处对齐，相当于设置了 center center。同理 0% 0% 相当于 left top，100% 100% 相当于 right bottom。

字体大小中的百分比 font-size 中的百分比值应该乘以元素所继承到的字体大小，也就是父元素的字体大小。

其他字体单位 既然说到了字体大小，顺便八一八其他的字体单位吧，有些可能平时并不会用，但是了解一下也没有坏处。有两个相对单位是：

em——相当于当前的字体高度，称作“全身方框”（em square）。如果在 font-size 上使用这个单位，应该乘以父元素的字体大小。用在 font-size 之外的属性上，则应该乘以元素自身的字体大小。 ex——相当于字体中的”x”的高度。 以下是绝对单位：

in——英寸（inch），相当于 2.54cm。 cm——厘米（centimeter）。 mm——毫米（millimeter）。 pt——磅（point）。1pt 相当于 1in 的 1/72。 pc——皮卡（pica）。1pc = 12pt。 px——像素（pixel unit）。1px = 0.75pt。

百分比的继承

如果某个元素设置了百分比的属性，则后代元素继承的是计算后的值。

1
p { font-size: 10px } p { line-height: 120% } / 120% of 'font-size' / 那么p的子元素继承到的值是 line-height: 12px，而不是 line-height: 120%。

发表于 | 分类于 
1
2
3
4
5
with(document.forms[0]){
       name.value = "lee king";
       address.value = "Peking";
       zipcode.value = "10000";
}

===

1
2
3
document.forms[0].name.value = "lee king";
document.forms[0].address.value = "Peking";
document.forms[0].zipcode.value = "10000";

js的解释器需要检查with块中的变量是否属于with包含的对象，这将使with语句执行速度大大下降，并且导致js语句很难被优化。为了兼顾速度与代码量可以找到一个比较折衷的方案：

发表于 | 分类于

==word-wrap==: normal|break-word;

值 描述
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

==white-space== 属性设置如何处理元素内的空白。

值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 
 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

==word-break== 属性规定自动换行的处理方法。

值 描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

发表于 | 分类于

window和document的区别：

window指浏览器窗口，可省咯，document对象是window对象的一部分。

window.location 和document.location 的区别：

window对象的属性引用的是location对象，表示该窗口中当前显示文档的URL

document的对象的location属性也引用了location

window.location===document.location//true

windows宽高innerHeight outerHeight

image
image
image
image
image

兼容问题推荐使用 获取浏览器窗口可视区域大小

1
2
document.body.clientWidth || document.documentElement.clientWidth;
document.body.clientHeight || document.documentElement.clientHeight;

image

image
image