继承
ES6之前并没有给我们提供extends继承.我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承.
call()
- 可以使函数进行调用 --- 语法结构是: 函数名.call()
- 可以改变函数里边this的指向 call(第一个参数是前边函数this的指向,第二个参数开始才是实参),call的主要作用是可以实现继承
- call的缺点就是 在改变this指向的同时 也调用了前边这个函数
<button>按钮</button>
<script>
var btn = document.querySelector('button');
// btn.onclick = btns.call()
// function btns() {
// fn.call(this)
// }
// // btn.click.call(window)
function fn(a, b) {
console.log(this);
console.log(a);
console.log(b);
}
// // fn()
fn.call(10, 20)
</script>
apply()
fun.apply(thisArg,[argsArray])
- thisArg:在fun函数执行时指定的this值
- argsArray:传递的值必须包含在数组里面
- 返回值就是函数的返回值,因为它就是调用函数
- 因此apply主要跟数组有关系,比如使用Math.max()求数组的最大值
var o = {
name: 'andy'
};
function fn(arr) {
console.log(this);
console.log(arr); // 'pink'
};
fn.apply(o, ['pink']);
// 1. 也是调用函数 第二个可以改变函数内部的this指向
// 2. 但是他的参数必须是数组(伪数组)
// 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值
// Math.max();
var arr = [1, 66, 3, 99, 4];
var arr1 = ['red', 'pink'];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);
bind()
bind()不会调用函数,但是能改变this的指向
fun.bind(thisArg,arg1,arg2...)
// 1. 不会调用原来的函数 可以改变原来函数内部的this 指向
// 2. 返回的是原函数改变this之后产生的新函数
<button>点击</button>
<button>点击</button>
<button>点击</button>
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
this.disabled = true;
setTimeout(function() {
this.disabled = false;
}.bind(this), 2000);
}
}
还有一种简单方法就是将var关键字改成let关键字
数组方法
迭代(遍历)方法:forEach()、map()、filter()、some()、every()
filter()
array.filter(function(value,index,arr){})
- filter()方法创建一个新的数值,数组中的元素是通过检查指定数组中复合条件的所有元素,主要用于筛选数组,注意它直接返回一个新数组
- value:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
var arr = [11,22,33]
var newArr=arr.filter(function(value){
return value>20;
})
console.log(newArr)
some()
array.some(function(value,index,arr){})
- some()方法用于检测数组中的元素是否满足指定条件,通俗点查找数组中是否有满足条件的元素
- 它的返回值是布尔值,如果查找不到这个元素,就返回false,否则就返回true
- 如果找到第一个满足条件的元素,则终止循环,不再继续查找
- value:数组当前项的值
- index:数组当前项的索引
- arr:数组对象本身
map()
array.map(function(value,index,arr),thisIndex)
- map()方法返回一个新数组,数组中的元素为原始数组调用函数处理后的值
- map()不会对空数组进行检测,返回一个undefined
- map()不会改变原始数组
- 返回值和原始值都是数组
var new_array=array.map(function(item){...});//这里的item是array的参数
demo1:
var data=[[1,2,3],[2,3,4],[3,4,5],[]]
var new_data=data.map(function(item){
return item[0]
})
console.log(new_data)//[1,2,3,undefined]
demo2:
let array=[1,2,3,4,5]
let newArray=array.map((item)=>{
return item*item
})
console.log(newArray)//[1,4,9,16,25]
对象方法
- Object.keys()方法返回一个元素为字符串的数组.
Object.keys(obj)
- 效果类似for...in
- 输出对象中值大于2的key的数组
var obj={
pname:'张三',
age:'18',
sex:'男'
}
console.log(Object.keys(obj));
- Object.defineProperty()定义新属性或修改原有的属性.
Object.defineProperty(obj,prop,descriptor)
- obj:必需.目标对象
- prop:必需.需定义或修改的属性的名字
- descriptor:必需.目标属性所拥有的特性
var obj={
id:1,
pname:'小米',
price:1999
}
Object.defineProperty(obj, 'address', {
value: '中国山东蓝翔技校xx单元',
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: true,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: true,
// configurable 如果为false 则不允许删除这个属性 默认为false
configurable: true
});
console.log(obj.address);
函数定义的方式
- 函数声明方式function关键字(命名函数)
- 函数表达式(匿名函数)
- new Function()