js第四周

85 阅读4分钟

day1

1、animate.css文件是一个动画库:放着很多很多的动画。

如何使用:
	1、打开百度:搜索animate.css 得到网址
		http://www.animate.net.cn/
		https://animate.style/
	2、下载 - 你们不用做这个操作
	3、引入此文件
	4、挑选你喜欢的动画,把class放到那个元素上
	5、并且要记得设置上animation-duration:3s; 执行时长
	6、还需要根据不同的动画,设置不同的初始效果,才会更好看

day04

    面向对象:是一个开发方式,更符合现实生活,所有的数据都包含在一个事物之中,一个方法调用多个方法联动

1、封装:3种

	1、直接量:
		var obj={
			属性名:属性值,
			...
			方法名:function(){操作},
			...
		}

	2、预定义构造函数:
		var obj=new Object();//空对象

	3、批量创建多个对象:自定义构造函数
		1、创建构造函数
			function 类名(name,age,hobby){
				this.name=name;
				this.age=age;
				this.hobby=hobby;
			}

		2、调用构造函数创建出对象:
			var xx=new 类名("袍哥",18,"吹牛");

	细节:
		1、访问属性和方法
			obj.属性名;	===	obj["属性名"];
			obj.方法名();	===	obj["方法名"]();
		2、可以随时随地添加新东西
			obj.属性名=属性值;
			obj.方法名=function(){};
		3、访问到不存在的属性名或方法名,返回的undefined
		4、遍历出对象的所有东西,必须使用for in循环
			for(var i in obj){
				obj[i]
			}
		5、在对象的方法中,想要使用对象自己的属性必须写为:this.属性名
                    难点:this的指向:
			1、单个元素绑定事件,this->这个元素
			2、多个元素绑定事件,this->当前元素
			3、定时器中的this->window
			4、箭头函数this->外部对象
			5、函数中this->谁在调用此方法,this就是谁
			6、构造函数之中this->当前正在创建的对象

                    

2、继承:父对象的东西,子对象可以直接使用,代码重用,节约内存空间!从而提升网站的性能!

            找原型对象(爸爸):
		1、对象名.__proto__
		2、构造函数名.prototype;

	找到原型对象,可以设置共有属性和【共有方法】
		原型对象.属性名=属性值;
		原型对象.方法名=function(){};

day5

1、面试和笔试:继承

1、判断自有和共有
	if(obj.hasOwnProperty("属性名")){
		//自有
	}else{
		if("属性名" in obj){//in关键字会在obj的原型链上查找此属性
			//共有
		}else{
			//没有
		}
	}

2、修改和删除自有和共有
	自有:
		修改:obj.属性名=新值;
		删除:delete obj.属性名;

	共有:
		修改:obj.属性名=新值;//危险:是在本地添加了一个同名属性,其实根本没有修改到原型对象
		删除:delete obj.属性名;.//无效的
		注意:操作一定要先找到原型对象

3、为一类人添加方法:为老IE的数组添加indexOf
	if(Array.prototype.indexOf===undefined){
		Array.prototype.indexOf=function(key,starti){
			starti===undefined&&(starti=0);
			for(var i=starti;i<this.length;i++){
				if(this[i]==key){
					return i
				}
			}
			return -1;
		}
	}

4、判断x是不是数组:41、判读x是不是继承自Array.prototype
		Array.prototype.isPrototypeOf(x);

	2、判断x是不是由Array这个构造函数创建的
		x instanceof Array

	3ES5Array.isArray(x);

            4、多态:Object.prototype.Tostring.call/apply(x)==="[object Array]"

5、自定义继承:
	两个对象之间设置继承:
		子对象.__proto__=父对象

	批量设置继承:
		构造函数名.prototype=父对象;//注意时机:先设置继承再创建对象

2、两链一包:

原型链:每个对象都有一个叫做.__proto__的操作,可以一层一层的找到自己的原型,最顶层的叫做Object的原型,形成的一条链式结构
	作用:找属性和方法
作用域链:是以函数的EC的scope chain属性为起点,经过AO,逐级引用,形成的一条链式结构
	作用:带来了变量的使用规则,找变量
闭包:希望保护一个可以反复使用的局部变量的一种此法结构
	function outer(){
		创建受保护的变量
		return function(){
			操作受保护的变量
			return 结果;
		}
	}

	var 内层函数=outer();

	外层函数调用几次,受保护的变量就创建了几个副本,我们的闭包就创建了几份
	同一次外层函数调用,返回的内层函数,都是在操作同一个受保护的变量
	受保护的变量永远不会被释放,使用过多,会导致内存泄漏,软件崩溃
	用于:防抖节流:
		1、elem.onmousemove
		2、input.oninput
		3window.onresize