1.函数的定义
// 函数的定义方式// 1. 自定义函数(命名函数) function fn() {};// 2. 函数表达式 (匿名函数)var fun = function() {};// 3. 利用 new Function('参数1','参数2', '函数体');var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);// 4. 所有函数都是 Function 的实例(对象)console.dir(f);// 5. 函数也属于对象console.log(f instanceof Object);2.函数的调用方式
// 函数的调用方式<button>点击</button>// 函数的不同调用方式决定了this 的指向不同// 1. 普通函数 this 指向windowfunction fn() {console.log('普通函数的this' + this);}window.fn();// 2. 对象的方法 this指向的是对象 ovar o = {sayHi: function() {console.log('对象方法的this:' + this);}}o.sayHi();// 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象function Star() {};Star.prototype.sing = function() {}var ldh = new Star();// 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象var btn = document.querySelector('button');btn.onclick = function() {console.log('绑定时间函数的this:' + this);};// 5. 定时器函数 this 指向的也是windowwindow.setTimeout(function() {console.log('定时器的this:' + this);}, 1000);// 6. 立即执行函数 this还是指向window(function() {console.log('立即执行函数的this' + this);})(); | 调用方式 | this指向 |
| 普通函数调用 function fn() {} | window |
| 构造函数调用 var o = { sayHi: function() {} |
实例对象原型对象里面的方法也指向实例对象 |
| 对象方法调用 function Star() {}; Star.prototype.sing = function() { } |
该方法所属的对象 |
| 事件绑定方法调用 btn.onclick = function() {} |
绑定事件的对象（button按钮之类的） |
| 定时器函数 window.setTimeout(function() {}, 1000) |
window |
| 立即执行函数 (function() {})(); |
window |
3.改变函数内部 this 指向 call apply bind 总结
JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题，常用的有 bind()、call()、apply() 三种方法。
相同点:
都可以改变函数内部的this指向.
2.2 call apply bind 总结
区别点:
1. call 和 apply 会调用函数, 并且改变函数内部this指向.
2. call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
3. bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景:
1. call 经常做继承.
2. apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向function fn(a, b) {console.log(this);console.log(a + b);};fn.call(o, 1, 2);// call 第一个可以调用函数 第二个可以改变函数内的this 指向// call 的主要作用可以实现继承function Father(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;}function Son(uname, age, sex) {Father.call(this, uname, age, sex); 把父亲的this指向孩子的this}var son = new Son('刘德华', 18, '男');console.log(son);fn.apply(o, ['pink']); apply -----------------------------------// 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 ---------------------------
function fn(a, b) {console.log(this);console.log(a + b);};var f = fn.bind(o, 1, 2);f();// 1. 不会调用原来的函数 可以改变原来函数内部的this 指向// 2. 返回的是原函数改变this之后产生的新函数// 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind// 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮// var btn1 = document.querySelector('button');// btn1.onclick = function() {// this.disabled = true; // 这个this 指向的是 btn 这个按钮// // var that = this;// setTimeout(function() {// // that.disabled = false; // 定时器函数里面的this 指向的是window// this.disabled = false; // 此时定时器函数里面的this 指向的是btn// }.bind(this), 3000); // 这个this 指向的是btn 这个对象// }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);}}4.严格模式
严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。
严格模式对正常的 JavaScript 语义做了一些更改：
消除了 Javascript 语法的一些不合理、不严谨之处，
<!-- 为整个脚本(script标签)开启严格模式 --><script>'use strict';// 下面的js 代码就会按照严格模式执行代码</script><script>(function() {'use strict';})();</script><!-- 为某个函数开启严格模式 --><script>// 此时只是给fn函数开启严格模式function fn() {'use strict';// 下面的代码按照严格模式执行}function fun() {// 里面的还是按照普通模式执行}</script>'use strict';// 1. 我们的变量名必须先声明再使用var num = 10;console.log(num);// 2.我们不能随意删除已经声明好的变量// delete num;// 3. 严格模式下全局作用域中函数中的 this 是 undefined。// function fn() {// console.log(this); // undefined。// }// fn();// 4. 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.// function Star() {// this.sex = '男';// }// var ldh = new Star();// console.log(ldh.sex);// 5. 定时器 this 还是指向 window // setTimeout(function() {// console.log(this);// }, 2000);// a = 1;// a = 2;// 6. 严格模式下函数里面的参数不允许有重名// function fn(a, a) {// console.log(a + a);// };// fn(1, 2);