一、实例对象与new命令
About
面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式。它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。
在其他语言中,我们总是将一种或者一类实例抽象出一个模型,称之为“类”,类中包含属性和方法,将类实例化后得到类的实例,称之为对象,该对象继承了类的属性和方法,但是在JS中,我们主要使用“构造函数”来充当类的角色,作为对象的模板。
1. 构造函数的特点有哪些?
- 声称对象时必须使用new命令
- 函数体内部使用了this关键字用来指向要生成的实例。
2. 如果使用构造函数时忘记使用new命令会造成什么后果?
这里先阐述new命令的工作原理:
- 先创建一个空对象;
- 将这个空对象的原型指向构造函数的prototype;
- 将this指向这个空对象;
- 执行构造函数函数体的代码
- 返回生成的对象
如果没有使用new命令,那么首先没有生成新的空对象,并且也不会改变this的指向,this默认指向window,所以如果执行了构造函数,那么本来要为对象初始化的属性会变成全局变量。
3. new.target的作用
当调用一个函数时,如果使用了new命令,那么new.target则指向当前函数,如果没有使用new命令则为undefined。可以用该方法来判断是否使用new命令。
function f() {
if (!new.target) {
throw new Error('请使用 new 命令调用!');
}
// ...
}
f() // Uncaught Error: 请使用 new 命令调用!
4. 如果想以某对象为模板生成新的对象,但是没有该对象的构造函数时应该怎么办?
使用Object.create(obj)可以以obj为模板创建新的对象,新的对象继承了obj的属性和方法。
5. 如何保证调用构造函数时就算不使用new命令也不会出错?
结合new.target指向来判断返回值
function Constructor(param) {
if ( new.target === Constructor){ // 判断出使用了new命令,那么执行构造函数
this.name = dog
this.age = 24
} else { // 如果没有使用new命令,那么重新调用构造函数并且使用new命令
return new Constructor(param)
}
}
二、this关键字
this关键字是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。
前面提到过,this可以用在构造函数之中,表示实例对象。除此之外,this还可以用在别的场合。但不管是什么场合,this都有一个共同点:它总是返回一个对象。个人感觉this的用法和python中的self比较类似,但是显然JS中this更复杂,并且后面还会提到如何更改this的指向。
1. 为什么要使用this?
我们要弄清楚this的含义就需要先搞清楚为什么要使用this,因为在JavaScript中,函数执行时会有一个执行环境,即执行上下文,这个是什么意思呢,就是比方说我在全局环境下调用该函数,那么该函数的执行环境就是window,该函数可以直接访问window上的属性,那如果是在一个对象obj里调用该方法,如果不修改this 的指向,那么this默认是指向obj的,这时候该函数可以访问obj里的属性。所以this就是用来指明一个函数或者方法的运行环境,来确定当前函数能够访问的空间。
总结一下,JavaScript 语言之中,一切皆对象,运行环境也是对象,所以函数都是在某个对象之中运行,this就是函数运行时所在的对象(环境)。这本来并不会让用户糊涂,但是 JavaScript 支持运行环境动态切换,也就是说,this的指向是动态的,没有办法事先确定到底指向哪个对象,这才是最让初学者感到困惑的地方。
2. this的使用场合有哪几种?
(1)全局环境
如果在全局环境下使用this或者在全局环境下调用函数体内有this的函数,那么此时的this指向window。
(2)构造函数
在构造函数中使用this,this指向的是新生成的实例对象。
(3)对象的方法中
如果在对象的方法中使用了this,this就指向了该方法运行时所在的对象,那么如果把该方法赋值给另一变量,那么this的指向就会改变。
为什么会这样呢,我们可以这样理解,obj和foo存在地址一和地址二中,如果通过obj去调用foo就相当于从地址一中调用地址二的方法,那么该方法的this指向地址一,但是如果把obj.foo赋值给其他变量直接调用,那就相当于直接从地址二中调用该方法,那么此时this就指向window。
并且需要注意的是如果this所在的方法不在对象的第一层,这时this只是指向当前一层的对象,而不会继承更上面的层。
var a = {
p: 'Hello',
b: {
m: function() {
console.log(this.p);
}
}
};
a.b.m() // undefined
3. 使用this应该注意避免什么情况?
(1)避免多层使用this
一般来说第一层this指向当前对象,第二层this直接指向window了
(2)避免数组处理方法中的this
数组的map和foreach方法,允许提供一个函数作为参数。这个函数内部不应该使用this。
(3)避免回调函数中使用this
回调函数中的this往往会改变指向,最好避免使用。
4. call的用法?
Function.prototype.call()可以接受多个参数,其中第一个参数为对象,即调用该方法绑定的对象,后面的参数为传入该方法的参数。如果第一个参数是null,undefined或者空,那么默认传入window,如果是原始值则传入该原始值的包装对象。
func.call(obj, arg1, arg2, ...)
5. call/apply/bind 的区别?
这三者都可以接受多个参数,但是apply接受的第二个参数为数组,另外,bind和前两者不同的是,bind返回的是一个新的函数,该函数已经绑定了一个this,之后无论谁调用都不会改变其this指向。
网友评论