JavaScript高级(二)
楼主今天主要分享一下ES5的一些补充内容,后面会继续写ES6的部分,希望大家多多点赞支持!
理解ES
- 全称: ECMAScript
- js语言的规范
- 我们用的js是它的实现
- js的组成
- ECMAScript(js基础)
- 扩展–>浏览器端
- BOM
- DOM
- 扩展–>服务器端
- Node.js
ES5
- 严格模式
- 运行模式: 正常(混杂)模式与严格模式
- 应用上严格式: ‘strict mode’;
- 作用:
- 使得Javascript在更严格的条件下运行
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
- 消除代码运行的一些不安全之处，保证代码运行的安全
- 需要记住的几个变化
- 声明定义变量必须用var
- 禁止自定义的函数中的this关键字指向全局对象
- 创建eval作用域, 更安全
'use strict'; // 开启严格模式
var username = 'kobe';
var age = 43;
console.log(username, age);
// 禁止自定义的函数中的this指向window
function Person(name) {
this.name = name;
}
new Person('kobe');
// 创建eval作用域,可以接卸传入的字符串并进行解析
var a = 2;
eval('var a = 123; alert(a)')
console.log(a);
// 对象 不能有重名的属性
var obj = {
name: 'kobe',
name: 'wade'
}
console.log(obj.name);
- JSON对象
- 作用: 用于在json对象/数组与js对象/数组相互转换
- JSON.stringify(obj/arr)
js对象(数组)转换为json对象(数组) - JSON.parse(json)
json对象(数组)转换为js对象(数组)
- Object扩展
- Object.create(prototype[, descriptors]) : 创建一个新的对象
- 以指定对象为原型创建新的对象
- 指定新的属性, 并对属性进行描述
- value : 指定值
- writable : 标识当前属性值是否是可修改的, 默认为true
- get方法 : 用来得到当前属性值的回调函数
- set方法 : 用来监视当前属性值变化的回调函数
- Object.defineProperties(object, descriptors) : 为指定对象定义扩展多个属性
var obj = {
name : 'curry', age : 29}
var obj1 = {
};
obj1 = Object.create(obj, {
sex : {
value : '男',
writable : true
}
});
obj1.sex = '女';
console.log(obj1.sex);
//Object.defineProperties(object, descriptors)
var obj2 = {
firstName : 'curry',
lastName : 'stephen'
};
Object.defineProperties(obj2, {
fullName : {
get : function () {
return this.firstName + '-' + this.lastName
},
set : function (data) {
var names = data.split('-');
this.firstName = names[0];
this.lastName = names[1];
}
}
});
console.log(obj2.fullName);
obj2.firstName = 'tim';
obj2.lastName = 'duncan';
console.log(obj2.fullName);
obj2.fullName = 'kobe-bryant';
console.log(obj2.fullName);
- Array扩展
- Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
- Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
- Array.prototype.forEach(function(item, index){}) : 遍历数组*
- Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组*
- Array.prototype.filter(function(item, index){}) : 遍历过滤出一个子数组*
var arr = [1, 2, 3, 4, 5, 2, 2, 3];
console.log(arr.indexOf(2));
console.log(arr.lastIndexOf(3));
var newArr = arr.map(function(item, index) {
// console.log(item, index);
// return 返回加工之后的每一项
return item + 10;
})
console.log(newArr);
console.log(arr);
// filter
var newArr2 = arr.filter(function(item, index) {
return item > 3;
})
console.log(newArr2);
var arr3 = [1, 2, 3];
arr3.push(4);
console.log(arr3);
arr3.forEach(function(item, index) {
console.log(item, index);
})
- Function扩展
- Function.prototype.bind(obj)
- 将函数内的this绑定为obj, 并将函数返回
- 面试题: 区别bind()与call()和apply()?
- fn.bind(obj) : 指定函数中的this, 并返回函数
- fn.call(obj) : 指定函数中的this,并调用函数
var obj = {
name: ‘kobe’
}
function fun(msg) {
console.log(this, msg);
}
// fun.call(obj, 123);
// fun.apply(obj, [123]);
// bind修改this指向
fun.bind(obj, 123)();
setTimeout(function () {
console.log(this);// window
}.bind(obj), 1000)
- Date扩展
- Date.now() : 得到当前时间值