From de04dd01072d6d46ff65ef800f60d6913dfef02a Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 15 Mar 2018 14:01:25 +0800 Subject: [PATCH] add files --- 03-JavaScript/06-函数.md | 45 ++++++- 03-JavaScript/07-call、apply、bind的区别.md | 16 --- 03-JavaScript/07-面向对象.md | 142 ++++++++++++++++++++ 03-JavaScript/08-构造函数和原型.md | 19 +++ 11-JavaScript/07-call、apply、bind的区别.md | 124 +++++++++++++++++ 11-JavaScript/this.md | 69 ++++++++++ 11-JavaScript/严格模式.md | 94 +++++++++++++ 12-前端/01-前端的几道题目.md | 2 +- 8 files changed, 490 insertions(+), 21 deletions(-) delete mode 100644 03-JavaScript/07-call、apply、bind的区别.md create mode 100644 03-JavaScript/08-构造函数和原型.md create mode 100644 11-JavaScript/07-call、apply、bind的区别.md create mode 100644 11-JavaScript/this.md create mode 100644 11-JavaScript/严格模式.md diff --git a/03-JavaScript/06-函数.md b/03-JavaScript/06-函数.md index 5e524c4..c33e6f5 100644 --- a/03-JavaScript/06-函数.md +++ b/03-JavaScript/06-函数.md @@ -293,10 +293,47 @@ foo: - - - - +## arguments + +在调用函数时,浏览器每次都会传递进两个隐含的参数: + +- 1.函数的上下文对象 this + +- 2.**封装实参的对象** arguments + +例如: + +```javascript + function foo() { + console.log(arguments); + console.log(typeof arguments); + } + + foo(); +``` + + +20180315_0903.png + +arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度。 + +在调用函数时,我们所传递的实参都会在arguments中保存。 + +arguments.length可以用来获取**实参的长度**。 + +我们即使不定义形参,也可以通过arguments来使用实参(只不过比较麻烦):arguments[0] 表示第一个实参、arguments[1] 表示第二个实参... + + +arguments里边有一个属性叫做callee,这个属性对应一个函数对象,就是当前正在指向的函数的对象。 + +```javascript + function fun() { + + console.log(arguments.callee == fun); //打印结果为true + } + + fun("hello"); +``` diff --git a/03-JavaScript/07-call、apply、bind的区别.md b/03-JavaScript/07-call、apply、bind的区别.md deleted file mode 100644 index 6c9014d..0000000 --- a/03-JavaScript/07-call、apply、bind的区别.md +++ /dev/null @@ -1,16 +0,0 @@ - - - -参考链接: - -- - -- - -- - - - - - - diff --git a/03-JavaScript/07-面向对象.md b/03-JavaScript/07-面向对象.md index 7e984a3..1daad45 100644 --- a/03-JavaScript/07-面向对象.md +++ b/03-JavaScript/07-面向对象.md @@ -191,6 +191,8 @@ 在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量。 +**租用与的上下级关系:** + 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用(**就近原则**)。如果没有则向上一级作用域中寻找,直到找到全局作用域;如果全局作用域中依然没有找到,则会报错ReferenceError。 @@ -243,6 +245,52 @@ ## this +解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的 上下文对象。 + +根据函数的调用方式的不同,this会指向不同的对象:【重要】 + +- 1.以函数的形式调用时,this永远都是window。比如`fun();`相当于`window.fun();` + +- 2.以方法的形式调用时,this是调用方法的那个对象 + +- 3.以构造函数的形式调用时,this是新创建的那个对象 + +- 4.使用call和apply调用时,this是指定的那个对象 + +针对第1和第2条的举例: + +```javascript + function fun() { + console.log(this.name); + } + + + var obj1 = { + name: "smyh", + sayName: fun + }; + + var obj2 = { + name: "vae", + sayName: fun + }; + + var name = "全局的name属性"; + //obj.sayName(); + //以函数形式调用,this是window + //fun(); //可以理解成 window.fun() + + //以方法的形式调用,this是调用方法的对象 + obj2.sayName(); + +``` + + +打印结果:`vae`。 + + + + @@ -267,4 +315,98 @@ +```javascript + + +``` + + + + + + + + + + +```javascript + + +``` + + + + + + + + + + +```javascript + + +``` + + + + + + + + + + +```javascript + + +``` + + + + + + + + + + +```javascript + + +``` + + + + + + + + + + +```javascript + + +``` + + + + + + + + + + +```javascript + + +``` + + + + + + diff --git a/03-JavaScript/08-构造函数和原型.md b/03-JavaScript/08-构造函数和原型.md new file mode 100644 index 0000000..e20411b --- /dev/null +++ b/03-JavaScript/08-构造函数和原型.md @@ -0,0 +1,19 @@ + + +## new一个构造函数的过程 + +- 1.开辟对内存空间,创建一个新的对象 + +- 2.**把this设置为当前对象** + +- 3.执行内部代码,设置对象属性和方法 + +- 4.返回新创建的对象 + + + +## 原型对象 + +引入: + +如果我们在 diff --git a/11-JavaScript/07-call、apply、bind的区别.md b/11-JavaScript/07-call、apply、bind的区别.md new file mode 100644 index 0000000..af88ed7 --- /dev/null +++ b/11-JavaScript/07-call、apply、bind的区别.md @@ -0,0 +1,124 @@ + + + + + + + + +## call()和apply() + + +这两个方法都是函数对象的方法,需要通过函数对象来调用。 + +当函数调用call()和apply()时,函数都会立即**执行**。 + + +- 都是用来改变函数的this对象的指向的。 + +- 第一个参数都是this要指向的对象(函数执行时,this将指向这个对象)。 + +- 都可以利用后续参数传实参。 + + +**call()和apply()的区别:** + + +- call()方法可以将实参在对象之后依次传递。 + +- apply()方法需要将实参封装到一个**数组**中统一传递。 + +比如针对下面这样的代码: + +```javascript + var persion1 = { + name: "小王", + gender: "男", + age: 24, + say: function (school, grade) { + alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade); + } + } + var person2 = { + name: "小红", + gender: "女", + age: 18 + } +``` + + +如果是通过call的参数进行传参,是这样的: + + +```javascript + persion1.say.call(persion2, "实验小学", "六年级"); +``` + + +如果是通过apply的参数进行传参,是这样的: + +```javascript + persion1.say.apply(persion2, ["实验小学", "六年级"]); +``` + +看到区别了吗,call后面的实参与say方法中是一一对应的,而apply传实参时,要封装成一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。 + + + +**this的情况:**【非常重要】 + + +- 1.以函数形式调用时,this永远都是window + +- 2.以方法的形式调用时,this是调用方法的对象 + +- 3.以构造函数的形式调用时,this是新创建的对象 + +- 4.使用call和apply调用时,this是指定的对象 + + +## call()和apply()的作用 + +- 改变this的指向 + +- 实现继承。Father.call(this) + + +## 参数的传递 + +1、使用call的时候,thisObj不传或者为null、undefined时,函数中的this会指向window对象。 + +2、传递一个别的函数名时,函数中的this将指向这个**函数的引用**。 + +3、传递的值为数字、布尔值、字符串,this会指向这些基本类型的包装对象Number、Boolean、String。 + +4、传递一个对象,函数中的this则指向传递的这个对象。 + + +## bind() + +call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。 + +bind与call和apply的不同点在于:call或apply会自动执行对应的函数,bind不会执行对应的函数。 + +推荐链接: + +- + + +参考链接: + +- + +- + +- + + + +- [JS中改变this指向的方法](http://www.xiaoxiaohan.com/js/38.html) + + + + + diff --git a/11-JavaScript/this.md b/11-JavaScript/this.md new file mode 100644 index 0000000..508d7b4 --- /dev/null +++ b/11-JavaScript/this.md @@ -0,0 +1,69 @@ + +## this + +### this的作用 + +- this可以帮我们简化很多代码。比如`xiaoming.name`、`xiaoming.age`可以直接写成`this.name`、`this.age`。 + +- 特别是当我们不知道一个对象是什么,或者这个对象没有名字但又很想调用它的时候,就会使用到this对象。 + +举例: + +- 遍历DOM对象,绑定click事件,调用当前点击的对象的id,而不是所有对象的id。 + + +### 全局作用域中的this + +当一段代码在浏览器中执行时,所有的全局变量和对象都是在window对象上定义的。换而言之,所有的全局变量和对象都属于window对象。 + + + +### this的定律 + + +this关键字永远指向函数(方法)运行时的**所有者**。 + + +### 函数赋值给变量时,this指向window + + +比如: + +``` +var foo1 = args.getInfo; +foo1(); + +var foo2 = function(){}; +foo2(); +``` + + +this都是指向window。 + +### 以函数形式调用时,this永远都是window + + +### 以方法的形式调用时,this是调用方法的对象 + + +### 解决闭包中的this指向问题 + + +内部函数是可以访问到外部函数的变量的。 + +方式一:直接通过父函数的名字访问 + +方式二:如果不知道父函数的名字,在父函数里加一句`_this = this`,此时`_this`相当于父函数的名字。 + +### 当this遇到一些特殊的函数时 + + + + + + + + + + + diff --git a/11-JavaScript/严格模式.md b/11-JavaScript/严格模式.md new file mode 100644 index 0000000..81d7b4d --- /dev/null +++ b/11-JavaScript/严格模式.md @@ -0,0 +1,94 @@ + + +## 严格模式 + +- 针对脚本文件:将`use strict`放在脚本文件的第一行,则整个脚本文件将以严格模式运行。 + + +- 针对单个函数:将`use strict`放在函数体的第一行,则整个函数以严格模式运行。 + + +脚本文件的变通写法:因为第一种调用方法不利于文件合并,所以更好的做法是,借用第二种方法,将整个脚本文件放在一个立即执行的匿名函数之中。 + + +## 严格模式和普通模式的区别 + +### 1、全局变量显式声明 + +在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,全局变量必须显式声明。 + + + +### 2、禁止使用with语句 + +因为with语句无法在编译时就确定,属性到底归属哪个对象。 + + + +### 3、创设eval作用域 + + +### 4、禁止this关键字指向全局对象: + +```javascript + var foo = function () { + console.log(this); + } + + foo(); +``` +上方代码中,普通模式打印的是window。严格模式下打印的是undefined。 + + + + + +### 构造函数必须通过new实例化对象 + +构造函数必须通过new实例化对象,否则报错。因为this为undefined,此时无法设置属性。 + +比如说: + + +``` + var Cat = function (name) { + this.name = name; + } + + Cat('haha'); +``` + +上方代码中,如果在严格模式下,则会报错。 + + +### 5、为了让代码更安全,禁止函数内部遍历调用栈 + +### 6、严格模式下无法删除变量 + + +### 7~10 属性相关 + +普通模式下,对一个对象的只读属性进行赋值,不会报错,只会默默地失败。严格模式下,将报错。 + +严格模式下,对禁止扩展的对象添加新属性,会报错。 + +普通模式下,如果对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误。 + +普通模式下,如果函数有多个重名的参数,可以用arguments[i]读取。严格模式下,多个重名的参数属于语法错误。 + + +### 函数必须声明在顶层 + + +将来Javascript的新版本会引入"块级作用域"。为了与新版本接轨,严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说,不允许在非函数的代码块内声明函数。 + +### 新增关键字 + +为了向将来Javascript的新版本过渡,严格模式新增了一些保留字:implements, interface, let, package, private, protected, public, static, yield。 + + + +## 总结 + +至少要能答出四五条。 + diff --git a/12-前端/01-前端的几道题目.md b/12-前端/01-前端的几道题目.md index 89716a8..c00d392 100644 --- a/12-前端/01-前端的几道题目.md +++ b/12-前端/01-前端的几道题目.md @@ -179,7 +179,7 @@ let x = 'global' -**总结1**:this永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。即:**谁调用**,指向谁。 +**总结1**:this永远指向**函数运行时所在的对象**,而不是函数被创建时所在的对象。即:**谁调用**,指向谁。 **举例**: