day16 面向对象与less
2.call与apply
2.1 this
一般在函数中使用，在不同的环境下指向不一样，取决于当前函数被调用时所处的环境 普通函数中this----window 事件处理函数中this----当前触发事件的对象 在对象方法中this-----当前对象 构造函数中this----实例对象
2.2 call与apply
-
call
-
作用：改变this的指向
-
语法：函数名.call(this的指向，参数1,参数2);
-
-
apply
-
作用：改变this的指向
-
语法：函数名.apply(this的指向，[参数1,参数2]);
-
-
-
作用：改变this的指向
-
区别：apply参数需要以数组的形式E传递
function sum(a,b){ console.log(this,a+b); } sum(10,20); //1.语法：函数名.call(this的指向，参数1,参数2); sum.call(1,100,200); sum.call(oBtn,100,200); //2. 语法：函数名.apply(this的指向，[参数1,参数2]); sum.apply(oBtn,[100,200]); -
-
例子
//3.例子 var name = "java"; var obj1 = { "name":"web", "toString":function(){ console.log(this.name); } } var obj2 = { "name":"ui" } obj1.toString.call(obj2); //ui var t = obj1.toString; //var t = function(){ console.log(this.name);} 全局的变量和函数都属于window t();//java console.log(window.name);//java -
//4.找数组中最大值 var arr = [5,22,9,4,7,3]; //假设数组的第一个元素就是最大的 var max = arr[0]; //循环比较，如果有比max更大的，将更大的这个值存储在max for(var i = 1;i<arr.length;i++){ if(max < arr[i]){ max = arr[i] } } console.log(max); console.log(Math.max.apply(1,arr));
3.面向对象继承
继承：子类继承父类的属性和方法，提高代码重用率
3.1 原型链继承
-
继承
//1.父类 基类 function Student(name,age,sex,skill){ this.name = name; this.age = age; this.sex = sex; this.c = ["画画","手工"]; this.skill = function(){ console.log(this.name+"能"+skill); } } Student.prototype.study = function(){ console.log("good good study,day day sleep"); } //2.子类，派生类 function BabyStudent(){ this.cry = function(){ console.log("day day cry"); } } //3.继承的行为 （原型链继承 子类的原型 = 父类的实例） BabyStudent.prototype = new Student("小明",5,"女","尿床"); //4.实例化对象 var baby1 = new BabyStudent //原型链：查找方法，先找实例本身，找实例__proto__(prototype),父类实例,父类__proto(prototype)....,找不到undefined console.log(baby1.name); //"小明" baby1.study(); -
问题：
//5.原型链继承存在的问题 //问题1：不能传参 var b2 = new BabyStudent(); console.log(b2); b2.c.push("跳舞"); console.log(b2.c); //["画画", "手工", "跳舞"] //问题2：如果继承下来引用类型数据，会一改全改 var b3 = new BabyStudent(); console.log(b3); console.log(b3.c); // ["画画", "手工", "跳舞"]
3.2 对象冒充继承
-
继承
//2.子类，派生类 function BabyStudent(name,age,sex,skill){ //3.对象冒充继承 Student.call(this,name,age,sex,skill); this.cry = function(){ console.log("day day cry"); } } //4.实例化对象 var b1 = new BabyStudent("小红",4,"女","打架"); console.log(b1); b1.c.push("打架"); console.log(b1.c); // ["画画", "手工", "打架"] //可以传参 var b2 = new BabyStudent("小绿",2,"男","打小红"); console.log(b2); //每一次创建都创建一个新对象，给对应的对象添加各种的属性和方法，不会一改全改 console.log(b2.c); //["画画", "手工"] -
问题
//5.问题:无法继承原型中的属性和方法 b1.study(); //报错
3.3 混合继承（原型链+对象冒充继承）
-
继承
//2.子类，派生类 function BabyStudent(name,age,sex,skill){ //3.对象冒充继承 (继承父类构造函数的属性和方法) Student.call(this,name,age,sex,skill); this.cry = function(){ console.log("day day cry"); } } //4.原型链继承 (继承父类原型对象中的属性和方法) BabyStudent.prototype = new Student("小明",1,"男","吃"); //5.实例化对象 var b1 = new BabyStudent("小绿",2,"男","打小红"); console.log(b1); console.log(b1.name); //小绿 b1.study(); -
问题：创建了一个多余的父类实例
-
2.4寄生式混合继承
//1. 声明父类构造函数 基类function Student ( name , age , sex ) {this . name = name ;this . age = age ;this . sex = sex ;this . arr = [ " 语文 " , " 数学 " ];}Student . prototype . study = function () {console . log ( " 好好学习，天天睡觉 " );}//2. 声明子类构造函数 派生类function SmallStudent ( name , age , sex ) {//A. 对象冒充继承Student . call ( this , name , age , sex );this . play = function () {console . log ( " 玩王者荣耀 " );}}//B. 原型链继承 子类的原型 = 父类的实例SmallStudent . prototype = Object . create ( Student . prototype );SmallStudent . prototype . constructor = SmallStudent ;var ss1 = new SmallStudent ( " 小妹 " , 7 , " 男 " );
3.less
-
less概念：css预处理语言(样式），融入编程思想 /sass，浏览器不能直接识别less文件，
-
插件：Easy LESS(将less文件，同步编程成css文件)
-
注释
/* 多行注释：编译成css时会保留注释 */ //单行注释：编译成css时不会保留注释
-
引入
行间 内部:style标签中 外链：link href /*2.引入 */ @import "./reset.css"; /*引入css文件，记得加后缀 */ @import "./reset"; /*将文件内容复制一份，less后缀可以省略 */
-
嵌套
/* 3.嵌套 层次嵌套： 父{ 父类的样式 子类{}} 引用嵌套： &：代替父类 */ .box{ width: 100%; height: 300px; background: teal; &:hover{ background: pink; } /* 子类样式 */ p{ color: #fff; font-size: 30px; span{ color: red; } } } -
变量
/* 4.变量： @变量名：值 */ @mainColor:#80C4AE; body{ background: @mainColor; } -
混入
-
基本混入
//定义 .radius{ width: 200px; height: 200px; background: teal; border-radius: 50%; } //使用 h1{ .radius ; } //编译： h1{ width: 200px; height: 200px; background: teal; border-radius: 50%; } -
带参数混入
//定义 .radius(@w,@h,@ra,@bg){ width: @w; height: @h; background: @bg; border-radius:@ra; } //使用 h1{ .radius(100px,100px,10px,red); /* 复制了一份 */ } //编译 h1{ width: 100px; height: 100px; background: 10px border-radius:red } -
参数带默认值，传参就使用传参的值，没有传参就是默认值
//定义 .radius(@ra:50%){ border-radius:@ra; } //使用 h1{ .radius; } h2{ .radius(10px) } //编译 h1{ border-radius:50%; } h2{ border-radius:10px; } -
@arguments
.shadow(@x,@y,@m,@f,@s){ box-shadow: @arguments; } h3{ .radius(200px,200px,10px,red); .shadow(2px,2px,2px,2px,#000); }
-
-
继承
//定义 .public{ width: 200px; height: 200px; background: gold; } .active{ &:extend(.public); } //编译 .public,.active{ width: 200px; height: 200px; background: gold; }
4.扩展
//1.引用数据类型在判断的时候，自动调用toString方法 数组转字符串 【】---》 “”
var arr = [1];
console.log(arr.toString()); //"1"
console.log(arr == 1); //"1" == 1
//2.对象的toString（） 返回具体的数据类型
var obj = {"w":1};
console.log(obj == "[object Object]"); //true
console.log(obj.toString()); //[object Object]
console.log(obj.toString.call(arr)); //[object Array]
console.log(obj.toString.call("re")); //[object String]
//3.
var a = {
i:1,
"toString":function(){
console.log("调用了");
return this.i++;
}
}
// 1==1 a==2 3==3
console.log(a==1&&a==2&&a==3);
//4.parseInt(要转换的值，前面转换值的进制)：强制转换为number类型，取整
console.log(parseInt("1010",2)); //10 将二进制的1010 转换为number
console.log(parseInt("10",16)); //16
console.log(parseInt("10",0)); //10 0默认是10进制
console.log(parseInt("34",2)); //NaN
var arr = [1,2,3,4,5];
console.log(arr.map(parseInt)); //[1, NaN, NaN, NaN, NaN]
// arr.map(function(value,index,array){})
//arr.map(parseInt(要转换的值，前面转换值的进制))
//1 0 ---1
//2 1 ---NaN
//3 2 ---NaN
//4 3 ---NaN
//5 4 ---NaN
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
