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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
