理解new构造函数和apply以及call

今天在看设计模式的时候,遇到一些挺低级的东西,搞不懂,顾查阅资料整理记录一番。

先了解一下new构造函数的过程:

function func(){
console.log('do');
} var foo = new func();

1、创建一个foo的空对象;

2、将func内部的this指向foo函数;(继承func函数内部的属性和方法)

3、foo._proto_ = func.prototye;(继承func的原型方法)

4、执行一遍foo,为其初始化;

5、返回一个foo对象;

(2018/04/17)补充:

1.创建一个foo空对象

2.foo._proto_ = func.prototype;

3.func.call(foo);

4.return foo;

二、call和apply的内部方法原理是一样的,只是使用方法不同。

先来一段官方定义:call和apply用于更改函数的执行上下文环境。

其实这样是很难理解的,到底什么意思呢?还是得上代码。

1)替换函数对象

function Cat() {
this.animal = 'cat';
console.log(this.animal);
} function Dog() {
this.animal = 'dog';
} Cat.call(Dog); //cat

内部执行可以分步骤进行:

1、Cat函数内部的this指向Dog函数;

2、执行Cat函数的函数上下文;

3、this.animal即为Dog.animal,因此Dog.animal赋值为‘cat’;

4、输出this.anmial即输出Dog.animal;

2)直接调用函数内部的方法

var func = {
txt : 'text',
showTxt : function() {
console.log(this.txt);
}
} var foo = {
txt : 'document'
} func.showTxt.call(foo); // document

步骤与例1差不多:

1、func的this指向foo;

2、执行func函数;

3、执行foo.showTxt函数;由于showTxt此时的调用者为foo,因此,showTxt内部的this指向foo,所以foo.txt为document;

此外,也有另一种请况:

function func() {
this.txt = 'text';
this.showTxt = function() {
console.log(this.txt);
}
} function foo(){
this.txt = 'document';
} func.showTxt.call(foo); // TypeError

这里会报错为TypeError,原因为并没有为foo对象进行初始化,只是执行了func的执行上下文。

如果是这样:

function func() {
this.txt = 'text';
this.showTxt = function() {
console.log(this.txt);
}
} function foo(){
this.txt = 'document';
}
var m = new func();
var n = new foo();
m.showTxt.call(n); // document

外部函数的内部函数的调用必须经过初始化。

3)函数继承

function func(){
this.showName = function(){
console.log(1111);
}
} function foo(){
func.call(this);
} var son = new foo();
son.showName();//1111

理解了上面两个例子就容易理解了。

(2018/04/17)补充:

关于call和apply存在的意义:

var func1 ={
name : "jhon";
say : function() {
console.log(this.name)
}
} obj = {name:"lili"}; func1.say.call(obj); // lili (注意:call和apply方法只能作用于Object对象上,Function上是不存在的)

  

上一篇:PostgreSQL中对IN、EXISTS、ANY/ALL、JOIN的sql优化


下一篇:如何优化webpack