javascript高级语法（进阶篇1）

最新推荐文章于 2024-04-03 00:50:20 发布

json{shen:"jing"}

最新推荐文章于 2024-04-03 00:50:20 发布

阅读量189

点赞数

分类专栏：前端笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_53415999/article/details/125915337

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

笔记

7 篇文章 0 订阅

订阅专栏

闭包部分：

// function a(){
		// 	function a(){
		// 		var bbb = 34;
		// 		console.log(aaa);
		// 	}
		// 	var aaa = 123;
		// 	return b;
		// }
		// var glob = 100;
		// var demo = a();
		// demo();
		// function test(){
		// var arr = [];//arr里面填充了十个函数，
		// for(var i = 0;i < 10;i++){
		// 	arr[i] = function (){// console.log(i);
		// 		document.write(i+" ");//此时会打印10个10，这是因为闭包的原因
		// 	}
		// }
		// 	return arr;//数组返回出来。然后外部接收
		// }
		// var myArr = test();//myArr相当于arr,让myArr每一位都执行
		// for(var j = 0;j < 10;j++){
		// 	myArr[j]();
		// }
		// for(var i = 0;i < 10;i++){
		// 	document.write(i);
		// }
		// document.write(i);


		function test(){
		var arr = [];//arr里面填充了十个函数，
		for(var i = 0;i < 10;i++){
			(function (j){
				arr[j] = function (){
					document.write(j + " ");
				}
			}(i));
		}
			return arr;//数组返回出来。然后外部接收
		}
		var myArr = test();//myArr相当于arr,让myArr每一位都执行
		for(var j = 0;j < 10;j++){
			myArr[j]();
		}
		for(var i = 0;i < 10;i++){
			document.write(i);
		}
		document.write(i);

argumen和克隆部分：

//深度克隆
		var obj = {
			name:"abc",//原始值，栈内存->abc
			age:123,
			card:['visa','master'],
			wife:{
				name:'bcd',
				son:{
					name:"aaa"
				}
			}
		}
		var obj1 = {

		}       //			// name:obj.name,
			// age:123,
			// card:[obj.card[0],obj.obj.card[1]],
			// wife:{
			// 	name:"bcd",
			// 	son:{
			// 		name:"bcd",
			// 		son:
			// 	}
			// }
		
		function deepClone(origin,target){

			var target = target || {},
				toStr = Object.prototype.toString,
				arrStr = "[object Array]";
			// 控制台:Object.prototype.toString.call([]);

			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;
			// var arr = ['a','b','c'];
			// for(var prop in arr){
			// 	cconsole.log(arr[prop])
			// }

			// 数组：特殊对象//也可以for in 数组
			//遍历对象 for(var prop in obj)
			//判断是否为原始值(typeof() object ) 判断是数组还是对象( instanceof toString->推荐) 建立相应的数组或者对象（拷贝一个对象-》拷贝属性，原始值直接拷贝，不是的话，引用值（数组，对象），是数组，建立一个新的数组，然后把原来的数组和现在要被拷贝的新的数组当做一对拷贝对象）
			// 完善一：没有传target，就return target
			//完善二：

		}


		// 三目运算符
		//简便操作 ? :
		// 条件判断 ? 是:否 并且会返回值else if + return
		// var num = 1 > 0 ? 2+2:1+1;
		var num = 1 > 0 ? ("10" > "9" ? 1:0):2



		// "10" > "9" :通过逐位比阿斯卡码，也就是1先比9，那么可知返回false

		// 所以以下可以简写如下，加括号稳妥点，因为他会先执行
						// if(toStr.call(origin[prop]) == arrStr){
						// 	target[prop] = [];
						// }else{
						// 	target[prop] = {};
						// }

		target[prop] = toStr.call(origin[prop]) == arrStr? [] : {}

Dom操作：



	<div>
		<p></p>
		<span></span>
		<!-- this is comment -->
	</div><!-- 这个div有7个节点，文本节点->元素节点-》文本->元素->文本->注释-》文本 -->

 <!-- 1元素节点 3文本节点 2属性节点 注释节点 9文档节点 -->

	<!-- DOM基本操作
	window.pageXOffset/page:横向/纵向
	window.pageXOffset/document.body.scollLeft









	 -->
	 <hr style="width: 10000px;">
	 <br>
	 <br>
	<script>
	//滚动条	
	// offsetL:尺寸
	function getScrollOffset(){
		if(window.pageXOffset)
		{
			return{
				x:window.pageXOffset,
				y:window.pageYOffset
			}
		}else{
			return{
				x:document.body.sc
			}
		}
	}

Json：

	<link rel="stylesheet" href="tool.js"defer="defer"><!-- 实现异步加载,等到页面解析完毕之后实现-->
</head>
<body>
	<script>
		//执行脚本为异步顺序
		//aysnc = "aysnc":加载完，立即执行，只能加载外部脚步，就是只能加src，区别于aysnc
		// asychronous javascript and xml:ajax
		


	</script>

原型链prototype：

	<script>
		//Person.prototype.constructor是什么？constructor代表构造函数，只不过存在他的原型上(prototype)
		function Person(){

		}
		var p1 = new person();//现在p1是Person的实例了
		// p1.__proto__ == Person/prototype;//实例的原型等于构造函数的原型，如果p1要访问constructype,就是p1.__prot__
		console.log(Person.prototype.constructor);//打印出构造函数，说白了，constructor(代表构造函数)里面装的是自己

		//函数有没有__proto__属性
		//构造函数.prototype 和 实例.__proto__
		//实例 = new 构造函数
        var fn = new Function();//声明一个函数 而function Person(){}（即函数）也可以是一个实例，所以
        //函数也有__proto__属性，js当中的特殊点，函数同时具有.prototype和__proto__两种属性
	</script>

作用域：

<script>
	
function test(){

}
//函数也是一个对象，属性，方法
// test.name
// test.prototype
// test.[[scope]]，scope纯真的是作用域链:不可访问的属性，隐式属性，拿不出来

// test();-->AO{} AO用完丢掉，执行器上下文在执行前会被产生
// test();-->AO{} AO用完丢掉 但与上一次的AO不一样

function a(){

	function  b(){
		var b = 2334
	}

	var a = 123;
	b();
}
var glob = 100;
a();

// a.name -- a.[[scope]]（定义a时产生的scope,有GO了),之后a定义完后，a执行，产生AO执行器上下文
// ，查找顺序，从作用域顶端开始寻找，在那个函数查找变量，就向那个函数的作用域顶端从上向下查找
//a defined a.[[scope]] ->0:GO{},a刚出生的时候，存的是它出生环境的对应执行器上下文，也就是GO
//a doing   a.[[scope]] ->0:AO{}（顶端） 1:GO{}(底端)

//a执行了。b才能被定义，b出生的时候，有了a
// 的劳动成果
//b defined b.[[scope]] a的AO(1)和GO(2) 
//d doing b生成自己的AO(0)，放在作用域最顶端 


// var a = 234;
// function test(){
// 	var a = 123;
// 	console.log(a);
// }
// test();//解释了先找AO，再找GO

// function a(){

// 	function  b(){
// 		var b = 2334
// 		aa = 0;
// 	}

// 	var a = 123;
// 	b();
// 	console.log(aa);
// }
// var glob = 100;
// a();//首先我们知道在b里面可以访问到a变量，那么如果我在b函数里面，让aa=0,然后我在a里面访问aa;如果输出的aa依旧是123，那么说明b产生的AO和a产生的AO不是同一个，如果变了，是同一个AO，最终会变！！！！！->0 b拿的是a的引用，遵循每个函数作用域链执行顺序


// 每一函数执行完，对应的执行器上下文销毁,a执行完之后



function a(){

	function b(){

		function c(){

		}
		c();
	}
	b();
}
a();

a  defined a.[[scope]] o:GO{}
a  doing   a.[[scope]] o:aAO
					   1:GO

b  defined b.[[scope]] o:aAO
					   1:GO{}
b  doing   b.[[scope]] o:bAO
					   1:aAO
					   2:GO			

c  defined c.[[scope]] o:bAO
					   1:aAO
					   2:GO{}
c  doing   c.[[scope]] o:cAO
					   1:bAO
					   2:aAO
					   3:GO//重要，我们知道，c执行完，c的cAo（执行器上下文）会被销毁，到从defined状态，如果在这个状况之上，我再执行一次c，就会出事类似的上个c的doing,只不过cAO变成新的newAO,剩余3个和之前是一样的



</script>