day15 面向对象
-
节流
function throttle(fun, wait) { var timer; //开 timer=undefined return function () { if (!timer) { //判断timer是否有值(当前是否已经开启了定时器) , timer = setTimeout(function () { //关 fun(); timer = undefined; //开 }, wait) } } }
-
防抖和节流的区别
-
防抖:高频率触发事件,只执行一次
-
节流:高频率触发事件,按一定的频率执行,隔一会执行一次
-
2.面向对象
2.1 概念
-
编程模式
面向过程:面向对象: -
==面向对象的特征==:
-
封装
-
继承
-
多态
-
-
类(对象):一种大范围的抽象的对象
-
实例对象:具体的对象
-
==对象的组成==:
-
属性:静态的,名词性 ------ var
-
方法:动态的,行为,作用----function
-
2.2 面向对象的创建方式
2.2.1 字面量创建
-
创建方式
//1.字面量创建 var obj1 = { //属性 "name":"如花", "age":18, "sex":"男", //方法 "skill":function(){ console.log("抠脚"); } } console.log(obj1); //问题:代码冗余,适合创建单个对象
-
问题:代码冗余,适合创建单个对象
2.2.2 实例创建
-
创建方式
//1.实例实例(单例) var obj1 = new Object(); //创建一个空对象 //添加属性 obj1.name = "连海龙"; obj1.sex = "男", //添加方法 obj1.skill = function(){ console.log("玩游戏"); } console.log(obj1); //问题:代码冗余,适合创建单个对象
-
问题:代码冗余,适合创建单个对象
2.2.3 工厂模式创建
-
创建方式
//1.工厂模式创建(封装) function createObj(name,age,height){ //创建对象 var obj = new Object(); //添加属性 obj.name = name; obj.age = age; obj.height = height; //添加方法 obj.skill = function(){ console.log("有钱"); } //返回创建好的对象 return obj; } //实例化对象 var obj1 = createObj("吴亦凡",65,179); console.log(obj1);
-
问题:解决代码冗余的问题,识别不明
var obj2 = createObj("蔡徐坤",30,182); console.log(obj2); var obj3 = createObj("旺财",2,30); console.log(obj3); //问题:解决代码冗余的问题,识别不明,无法判断对象的类型 console.log(typeof obj2,typeof obj3); //object object console.log(obj3 instanceof Object); //true 判断实例对象是否由 后面的这个对象创建
2.2.4 ==构造函数创建==
-
创建方式
1.构造函数名首字母大写(为了区分普通函数)
2.不需要自己创建对象,不需要返回,直接在this上添加属性和方法即可
3.构造函数调用前面一定要加new,不加就跟普通函数一样
//1.声明构造函数 function Student(name, age, sex) { //1.隐式的创建了一个空对象,让this指向这个空对象 //this = new Object(); //2.执行构造函数中代码(添加属性和方法) //添加属性 this.name = name; this.age = age; this.sex = sex; //添加方法 this.study = function () { console.log("good good study,day day up!!!,好好学习,天天自闭"); } //4.隐式的返回创建好的对象 //return this } var s2 = new Student("曾庆文",18,"女"); console.log(s2); // {name: "曾庆文", age: 18, sex: "女", study: ƒ} console.log(s2 instanceof Student); //true
-
问题:解决可以识别问题,浪费内存
//2.实例化对象 var s1 = new Student("李华",10,"男"); var s2 = new Student("曾庆文",18,"女"); //问题:解决了识别不明的问题,浪费内存 console.log(s1.study == s2.study);//false 比较的是地址
-
==new操作符的作用==
1.隐式的创建了一个空对象,让this指向这个空对象 2.执行构造函数中代码(添加属性和方法) 3.让创建的实例对象的__proto__指向构造函数的prototype 4.隐式的返回创建好的对象
2.2.5 ==原型创建==
1) 原型对象与原型属性
-
prototype:原型对象,函数在声明的时候自动创建的一块存储区域,用于存储公共的共享属性和方
-
__ __proto__: 原型属性,每一个实例对象在创建的时候都会有一个原型属性__proto__,指向构造函数的prototype
//1.prototype:原型对象,函数在声明的时候自动创建的一块存储区域,用于存储公共的共享属性和方法 function sum(){} console.dir(sum); console.dir(Array); //2.获取原型对象 Array console.log(Array.prototype); //3. __proto__: 原型属性,每一个实例对象在创建的时候都会有一个原型属性__proto__,指向构造函数的prototype var arr = new Array(1,2); console.log(arr.__proto__); console.log(Array.prototype === arr.__proto__); //true
2) 原型创建对象
-
创建
//1.声明构造函数 function Student(){}; //2.在原型上添加属性和方法 Student.prototype.name = "李华"; Student.prototype.school = "中公"; Student.prototype.study = function(){ console.log("失眠、自闭、掉头发"); } //3.实例化对象 var s1 = new Student(); console.log(s1); //原型链:查找机制,先找实例本身,再找实例的__proto__(构造函数的prototype) console.log(s1.name);
-
问题:解决内存浪费问题,不能传参
//问题:解决内存浪费的问题,不能传参 var s2 = new Student(); console.log(s1.study == s2.study); //true console.log(s2.name);
2.2.6 ==混合创建==
-
混合创建:构造函数(可变)+原型(固定的,公共的,共享的)
//1.声明构造函数(可变) function Student(name,age,sex,skill){ this.name = name; this.age = age; this.sex = sex; this.skill = function(){ console.log(skill); } } //2.原型中添加属性和方法 Student.prototype.school = "中公"; Student.prototype.study = function(){ console.log("程序员,敲代码,学习"); } //3.实例化对象 var s1 = new Student("曾庆文",18,"女","篮球,rap"); console.log(s1);
-
问题:破坏的封装性
2.2.7 动态混合创建
-
创建
//1.声明构造函数(可变) function Student(name, age, sex, skill) { this.name = name; this.age = age; this.sex = sex; this.skill = function () { console.log(skill); } if (typeof this.study != "function") { //2.原型中添加属性和方法 Student.prototype.school = "中公"; Student.prototype.study = function () { console.log("程序员,敲代码,学习"); } } }
2.3 面向对象实例
-
实例实现步骤
-
先声明构造函数,new一个实例对象
-
确定属性:(var声明的变量,并且会在其他位置使用的变量)
-
确定方法:function 里面的都是方法,动态的都是方法
//1.声明构造函数 function TabSwitch(id) { //2.添加属性 (var声明的变量,并且会在其他位置使用的变量) this.oBox = document.getElementById(id); this.oBtns = this.oBox.getElementsByTagName("button"); this.oDivs = this.oBox.getElementsByTagName("div"); var that = this; //先存储一个指向正确的this //3.添加方法(入口方法) this.init = function () { for (var i = 0; i < this.oBtns.length; i++) { this.oBtns[i].index = i; this.oBtns[i].onclick = function () { that.change(this.index); //事件处理函数中的this---触发事件的对象 } } } //入口方法自己调用 this.init(); //4.切换div的方法 this.change = function (index) { for (var j = 0; j < this.oDivs.length; j++) { this.oDivs[j].style.display = "none"; } this.oDivs[index].style.display = "block"; } }
-
2.4 面向的继承方式