1.严格模式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01_严格模式</title> 6 </head> 7 <body> 8 <!-- 9 1. 理解: 10 * 除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）。 11 * 顾名思义，这种模式使得Javascript在更严格的语法条件下运行 12 2. 目的/作用 13 * 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为 14 * 消除代码运行的一些不安全之处，为代码的安全运行保驾护航 15 * 为未来新版本的Javascript做好铺垫 16 3. 使用 17 * 在全局或函数的第一条语句定义为: 'use strict'; 18 * 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用 19 4. 语法和行为改变 20 * 必须用var声明变量 21 * 禁止自定义的函数中的this指向window 22 * 创建eval作用域 23 * 对象不能有重名的属性 24 --> 25 26 <script type="text/javascript"> 27 'use strict'; 28 var age = 12; 29 console.log(age); 30 function Person(name, age) { 31 this.name = name; 32 this.age = age; 33 console.log(this) 34 } 35 new Person('kobe', 39); // 构造函数调用，this是实例化对象 36 Person('kobe', 39); //this报错 37 setTimeout(function () { 38 console.log(this);//window 39 }, 1000); 40 41 //* 创建eval作用域 42 var name = 'kobe'; 43 eval('var name = "anverson";alert(name)'); 44 console.log(name); 45 46 var obj = { 47 name : 'kobe', 48 name : 'weide' 49 }; 50 console.log(obj); 51 52 </script> 53 54 </body> 55 </html>
2.静态方法，
Object.create(prototype, [descriptors])，
Object.defineProperties(object, descriptors)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 10 <!-- 11 ES5给Object扩展了好一些静态方法, 常用的2个: 12 1. Object.create(prototype, [descriptors]) 13 * 作用: 以指定对象为原型创建新的对象 14 * 为新的对象指定新的属性, 并对属性进行描述 15 value : 指定值 16 writable : 标识当前属性值是否是可修改的, 默认为false 17 configurable: 标识当前属性是否可以被删除 默认为false 18 enumerable： 标识当前属性是否能用for in 枚举 默认为false 19 20 2. Object.defineProperties(object, descriptors) 21 * 作用: 为指定对象定义扩展多个属性 22 * get ：用来获取当前属性值得回调函数 23 * set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值 24 * 存取器属性：setter,getter一个用来存值，一个用来取值 25 --> 26 27 <script> 28 var obj= { 29 name:'marco', 30 age:14 31 32 } 33 34 //以obj为原型对象，给新的对象obj1扩展新的属性 35 var obj1= Object.create(obj,{ 36 sex:{ 37 value:'男', 38 writable:true, 39 configurable:true, 40 enumerable:true 41 42 } 43 }); 44 console.log(obj1); //{sex: "男"} 45 46 obj1.sex='女' 47 console.log(obj1); //{sex: "女"} 48 // delete obj1.sex 49 // console.log(obj1); 50 51 //遍历属性 52 for(var i in obj1){ 53 console.log(i) //sex name age 54 } 55 56 57 58 var obj2={ 59 firstname:'kobi', 60 lastname:'buranent' 61 } 62 63 //为obj2扩展一个新的属性fullname 64 Object.defineProperties(obj2,{ 65 fullname:{ 66 get:function(){ //去读取当前属性值时，自动触发的get函数 67 console.log('get()') 68 return this.firstname+' '+this.lastname; 69 }, 70 set: function(data){ //data就是改变的值tim duncan 71 //修改当前属性值自动触发的set回调函数，并且实参即为修改后的值 72 // console.log(data) 73 var names=data.split(' ')//拆成数组 74 this.firstname=names[0]; //this就是传进来的obj2 75 this.lastname=names[1] 76 }, 77 78 enumerable:true //可遍历 79 } 80 }) 81 82 console.log(obj2); 83 console.log(obj2.fullname); //自动触发一次get函数 84 85 obj2.fullname='tim duncan' //自动触发一次set函数 86 console.log(obj2.fullname); //自动触发一次get函数 87 88 for(var i in obj2){ 89 console.log(i) //firstname lastname fullname 90 } 91 92 93 </script> 94 </body> 95 </html>
3.Array扩展
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04_Array扩展</title> 6 </head> 7 <body> 8 <!-- 9 1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标 10 2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标 11 3. Array.prototype.forEach(function(item, index){}) : 遍历数组 12 4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值 13 5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值 14 --> 15 <script type="text/javascript"> 16 /* 17 需求: 18 1. 输出第一个6的下标 19 2. 输出最后一个6的下标 20 3. 输出所有元素的值和下标 21 4. 根据arr产生一个新数组,要求每个元素都比原来大10 22 5. 根据arr产生一个新数组, 返回的每个元素要大于4 23 */ 24 25 var arr = [1, 4, 6, 2, 5, 6]; 26 console.log(arr.indexOf(6));//2 27 //Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标 28 console.log(arr.lastIndexOf(6));//5 29 30 //Array.prototype.forEach(function(item, index){}) : 遍历数组 31 arr.forEach(function (item, index) { 32 console.log(item, index); 33 }); 34 35 //Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值 36 var arr1 = arr.map(function (item, index) { 37 return item + 10 38 }); 39 console.log(arr, arr1); 40 41 //Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值 42 var arr2 = arr.filter(function (item, index) { 43 return item > 4 44 }); 45 console.log(arr, arr2); 46 47 48 </script> 49 </body> 50 </html>
4.
call()/apply()是立即调用函数
bind()是将函数返回
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05_Function扩展</title> 6 </head> 7 <body> 8 <!-- 9 1. Function.prototype.bind(obj) : 10 * 作用: 将函数内的this绑定为obj, 并将函数返回 11 2. 面试题: 区别bind()与call()和apply()? 12 * 都能指定函数中的this 13 * call()/apply()是立即调用函数 14 * bind()是将函数返回 15 --> 16 <script type="text/javascript"> 17 // function fun(age) { 18 // this.name = 'kobe'; 19 // this.age = age; 20 // console.log('dddddddddddddd'); 21 // } 22 // var obj = {}; 23 // fun.bind(obj, 12)(); 24 // console.log(obj.name, obj.age); 25 26 var obj={ 27 username:'kobi' 28 } 29 30 function foo(data){ 31 console.log(this, data) 32 } 33 34 foo.call(obj,33) 35 foo.apply(obj,[24]) //传入的实参是数组 36 //bind特点，不会立即调用，而是将函数返回， 传参的方式和call一样 37 38 // var bar=foo.bind(obj,34) 39 // console.log(bar) 40 // bar() 41 foo.bind(obj,45)() //不会立即调用，而是将函数返回，需要加（）再次调用下 42 43 setTimeout(function(){ 44 console.log(this) 45 }.bind(obj),1000) //函数自调用，bing一般用在函数自调用中 46 47 48 49 </script> 50 </body> 51 </html>