JavaScript基础学习（四）

笔记学习出处：渡一教育 Web前端百大项目
typeof可以返回的6个结果：
Number、undefined、string、Boolean、Object、function

逗号操作符：
var num=(1,2);—>2

var f=(
	function f(){
		return '1';
	},
	function g(){
		return 2;
	}());
	typeof f;

上面等号右边是一个立即执行函数，而根据逗号操作符的原理，最后的立即执行函数里面的函数是g()，return 2，而typeof 2的结果是Number

例子：

if(function f() {}){  //true
	// f 是undefined
	x+=typeof f;
} 
console.log(x);  //1undefined

括号的用途之一就是可以把括号里面的转换成表达式

this
1.函数预编译过程 this->window

function test(c){
	//var this = Object.creat(test.prototype);
	var a=123;
	function b() {}
}
AO{
	arguments:[1],
	this:window,
	c:1,
	a:undefined,
	b:function (){}
}
test(1);
new test();

2.全局作用域里 this ->window
3.call/apply 可以改变函数运行时this指向
4.obj.func(); func()里面的this指向obj
(也就是谁调用了这个方法，那this就指向谁）

var obj={
	a:function (){
		console.log(this.name)
	},
	name:"abc";
}
obj.a();

this的例子：

var name="222";
var a={
	name:"111",
	say:function (){
		console.log(this.name);
	}
}
var fun=a.say;
fun();  //222 因为在全局内执行，并不是对象调用
a.say(); //111
var b={
	name:"333",
	say:function (fun){
		fun();
	}
}
b.say(a.say);  //222 b调用，说明this指向的是b，但是b中的函数执行中是fun()，并不是this.fun()，说明走的是预编译环节，所以是this指向window
b.say=a.say;
b.say(); //3 将a.say拷贝到b.say上面，那么b.say中的this指向一定是b

例子2：

var fpp=123;
function print(){
	this.foo=234;  //注意：这个this指向的是window
	console.log(foo); //234 打印的是window的foo，但是window的foo被修改成了234，所以打印的是234
}
print();

var fpp=123;
function print(){
	//var this =Object.creat(print.prototype)
	this.foo=234;  //此时this指向print
	console.log(foo); //访问的是foo，仍然是window上的。
}
new print();  //123

例子3：

var a=5;
function test() {
	a=0;
	alert(a);
	alert(this.a);
	var a;
	alert(a);
}
AO{
	a:0,
	this:window
}
test();  //0  5  0
AO{
	a:0,
	this:test
}
new test();  //0 undefined 0

arguments
arguments.callee（函数的引用）
其实，arguments.callee就等于test

function test() {
	console.log(arguments.callee);
	console.log(arguments.callee==test); //true
}
test();

运用例子：

var num=(function (n){
	if(n===1){
		return 1;
	}
	return n*arguments.callee(n-1);
}(100))

func.caller(表示在哪个环境被调用)

function test(){
	demo();
}
function demo(){
	console.log(demo.caller);  //test
}
test();

克隆

浅克隆：

var obj={
	name:'abc',
	age:20,
	sex:'female'
}
var obj1={}
function clone(origin,target){
	//如果参数中没有target,需要自己生成
	var target=target||{};
	for(var prop in origin){
		target[prop]=origin[prop];
	}
	return target;
}
clone(obj1,obj);

引用值拷贝：

var obj={
	name:'abc',
	age:20,
	sex:'female',
	card:[1,2,3]
}
var obj1={}
function clone(origin,target){
	//如果参数中没有target,需要自己生成
	var target=target||{};
	for(var prop in origin){
		target[prop]=origin[prop];
	}
	return target;
}
clone(obj1,obj);
obj1.card.push(4);
console.log(obj1.card);
console.log(obj.card);

深度拷贝

var obj={
	name:'abc',
	age:20,
	sex:'female',
	card:['visa','master'],
	wife:{
		name:"bcd",
		son:{
			name:"aaa"
		}
	}
}
//步骤：
//1.判断是不是原始值 typeof() obj---引用值
//2.判断是数组还是对象 instanceof toString constructor
//3.建立相应的数组或对象
//4.循环（递归）
function deepClone(origin,target){
	var target=target||{};
	toStr=Object.prototype.toString;
	arrStr="[object Array ]";  //方便比对
	for(var prop in origin){
		//防止原型链↓不是原型链的属性
		if(origin.hasOwnProperty(prop)){
			if(origin[prop]!=="null" && typeof(origin[prop])=='object')){
				if(toStr.call(origin[prop])==arrStr){
					target[prop]=[];
				} else{
					target[prop]={};
				}
				deepClone(origin[prop],target[prop]);
			}else{
				target[prop]=origin[prop];
			}
		}
	}
	return target;
}
deepClone(obj,obj1);

三目运算符
条件判断？ 是：否 并且会返回值

var num=1<0? 2+2:1+1;
console.log(num);

数组
1.数组的定义
new Array(length/content);

var arr=new Array(1,2,3);
//注意：如果只有一个参数的话，那么就会生成长度为n的数组,并且这个参数n一定要为整数
var arr1=new Array(10);

字面量

var arr=[1,2,3];

2.数组的读和写
数组可以看成是一种特殊的对象
arr[num] //不可以溢出读 结果是undefined
arr[num]=xxx; //可以溢出写

数组的常用方法
1.改变原数组
push(在数组的后面添加)、pop（剪切数组最后的元素）、shift（从数组的前面剪切）、unshift（在数组的前面添加）、sort（排序 自小到大 按照字符排序）、reverse（逆转）
splice（切片）

var arr=[];
arr.push(10);
arr.unshift(1);
console.log(arr);

var arr=[1,2,3];
arr.pop();
arr.shift();
console.log(arr);
console.log(arr.reverse);

var arr=[1,1,2,2,3,3];
//arr.splice(从第几位开始，截取多少的长度，在切口处添加新的元素)
//看看截取的片段
var a=arr.splice(1,2);
console.log(a);
//看看截取后剩下的片段
console.log(arr);
arr.splice(1,1,0,0,0);
console.log(arr);  //1,0,0,0,2,2,3,3

由于sort是按照从小到大、并且是字符大小来排序的，很多时候都不满足需求，所以需要在sort提供的修改方法的接口上进行修改：

var arr=[1,3,5,4,10];
//规则：
//1.必须写两个形参
//2.看返回值
//(1)当返回值为负数时，那么前面的数放在前面
//（2）当返回值为正数时，那么后面的数在前
//（3）为0，不动
arr.sort(function (a,b){
	if(a>b){
		return 1;
	}else{
		return -1;
	}
});
//另外一种更简单的写法
arr.sort(function (a,b){
	return a-b;
});

这个sort会将函数执行无数遍，每次执行都会传递两个参数，例如第一次执行会传递数组中的参数1和3，如果最后return是正数的话，那么后面的3就会跑到参数1的前面，如果return的值是负数，那么前面的1始终在3的前面。
传参的顺序：（符合冒泡排序的算法规则）
1、3–>1、5–>1、4–>1、10–>3、5–>3、4–>3、10–>…

自己手写push函数

var arr=[];
Array.prototype.push=function () {
	for(var i=0;i<arguments.length;i++){
		this[this.length]=arguments[i];
	}
	return this.length;
}
arr.push(4);
console.log(arr);

给一个有序的数组，乱序

var arr=[1,2,3,4,5,6]
arr.sort(function (){
	return (Math.random()-0.5);
})

var julia={
	name:"julia",
	age:18,
	sex:"female",
	face:"beautiful"
}
var Mary={
	name:"Mary",
	age:20,
	sex:"female",
	face:"normal"
}
var Tom={
	name:"Tom",
	age:40,
	sex:"male",
	face:"amazing"
}
//给对象按照年龄排序
var arr=[julia,Mary,Tom];
arr.sort(function(a,b){
	if(a.age>b.age){
		return 1;
	}else{
		return -1;
	}
})

2.不可改变数组
concat（连接两个数组）、join（连接，必须是字符串类型）—>split（按照xx拆分成数组）、toString、slice（截取，不改变原数组）

var arr1=[1,2,3];
var arr2=[4,5,6];
var arr3=arr1.concat(arr2);
console.log(arr3);

var arr1=[1,2,3];
console.log(arr1.toString()); //"1,2,3"

slice：
两个参数：slice(从该位开始截取，截取到该位)
一个参数：slice(从该位开始截取，一直到最后)

var arr1=[1,2,3];
var newArr=arr1.slice(1,2);
console.log(newArr);

join/split：

var arr=[1,2,3];
var arr1=arr.join("-")
console.log(arr1);//1-2-3
console.log(arr1.split("-")); //["1","2","3"]

使用join实现拼接：

var str="alibaba";
var str1="baidu";
var str2="tenxun";
var str3="toutiao";
var str4="wangyi";
var str5="elma";
var strFinal="";
var arr=[str,str1,str2,str3,str4,str5];
strFinal=arr.join("");

类数组
1.可以利用属性名模拟数组特性
2.可以动态的增长length属性
3.如果强行让类数组调用push方法，则会根据length属性值的位置进行属性的拓展。

特点：
1.属性要为索引（数字）属性，必须有length属性，最好加上push方法

类数组如何往里面放东西是根据length的改变而改变
既可以当成数组来用，也可以当成对象来用

var obj={
	"0":'a',
	"1":'b',
	"2":'c',
	"length":3,
	"push":Array.prototype.push，
	"splice":Array.prototype.splice
}
obj.push(4); //会发现运行结果是:
//"0":'a',
//"1":'b',
//"2":'c',
//"3":'d',
//"length":4,

小例子：
push的内部原理

Array.prototype.push=function (target){
	this[this.length]=target;
	this.length++;
}

var obj={
	"2":"a",
	"3":"b",
	"length":2,
	"push":Array.prototype.push
}
obj.push('c');
obj.push('d');
//那么，console.log(obj)；是什么结果？

结果为：
obj={
“2”:“c”,
“3”:“d”,
“length”:4,
“push”:Array.prototype.push
}
关键在length

重写typeof
1.分两类 原始值 引用值
2.区分引用值（数组、对象、包装类）

function type(target){
	var template={
		"[object Array]":'array',
		"[object Object]":'object',
		"[object Number]":'number-object',
		"[object Boolean]":'boolean-object',
		"[object String]":'string-object'
	}
	if(target==null){
		return 'null';
	}
	if(typeof(target)=='function'){
		return 'function';
	}else if(typeof(target=='object')){
		var str=Object.prototype.toString.call(target);
		return template[str];
	}else{
		return typeof(target);
	}
}

数组去重
基本原理：利用对象中的属性名不可能重复出现两次。将数组的每一位当成对象的属性名。在原型链上编程。

var arr=[1,1,1,1,2,2,2,2,1,1,1];
Array.prototype.unique=function (){
	var arr=[];
	var obj={}
	var len=this.length;
	for(var i=0;i<len;i++){
		if(!obj[this[i]]){
			obj[this[i]]="abc";
			arr.push(this[i])
		}
	}
	return arr;
}
var arr1=arr.unique();
console.log(arr1);

try…catch
try{}catch(e) {}finally{}
Error.name的六种值对应的信息：
1.EvalError：eval()的使用和定义不一致
2.RangeError：数值越界
3.ReferenceError：非法或不能识别的引用数值
4.SyntaxError：发生语法解析错误
5.TypeError：操作数类型错误
6.URIError：URI处理函数使用不当

作用：当try里面报错的时候，不抛出错误，不会执行try后面的代码，将跳到catch（捕捉错误）里面的代码执行，（catch里面的e是一个对象，里面封装了两种错误信息error.massage和error.name）但不影响后面代码的执行
try里面没有错误，就不会执行catch里面的代码。

try{
	console.log('a');
	console.log(b);
	console.log('c');
}catch(e){
	console.log(e.massage+" "+e.name);
}
console.log('d');

es5严格模式
“use strict”
不再兼容es3的一些不规则语法。使用全新的es5规范（说白了就是有一些语法在es3.0可以用，但是使用了es5.0严格模式之后就一定不能用了）
两种用法：
全局严格模式

"use strict";
function test(){
	console.log(arguments.callee);
}
test();  //报错

局部函数内严格模式（推荐）

function demo() {
	console.log(arguments.callee);
}
demo();
function test(){
	"use strict";
	console.log(arguments.callee);
}
test();

就是一行字符串，不会对不兼容严格模式的浏览器产生影响
不支持with、arguments.callee、func.caller，变量赋值前必须声明，局部this必须被赋值(也就是预编译的时候this不再指向window了)（Person.call(null/undefined)）赋值什么就是什么），拒绝重复属性和参数

with:
with可以改变作用域链，他会将括号里面的对象放到作用域链的最顶端。

var obj={
	name="aaa"
}
var name='window';
function test(){
	var name="bbb";
	with(obj){
		console.log(name);
	}
}
test();  //aaa

对命名空间运用的改善：

var org={
	department1:{
		a:{
			name:"a",
			age:18
		},
		b:{
			name:"b",
			age:20
		}
	},
	department2:{
	}
}
with(org.department1.a){
	console.log(name);
}

但是，强行修改作用域链会使得效率降低

eval() 可以把字符串当代码执行
可改变作用域

var a=123;
eval('console.log(a)');

现在的浏览器都是基于es3.0。
那么，基于es3.0和es5.0在某些方法上就会产生冲突，es3.0和es5.0产生冲突的部分怎么解决——es5.0严格模式。
如果使用了es5.0严格模式，那么产生冲突的那部分就是用es5.0，否则用的是es3.0.

如何启动es5.0严格模式?——在整个页面的最顶端写上一行代码：“use strict”；