js new 关键词加深理解

官方说明中,new关键词包含以下三个过程

1、创建空对象;
2、将类的prototype属性赋值给新创的对象的__proto__属性 ;
3、通过call方法让新创建的空对象能调用类里面的变量及方法;

为了加深理解,我们不用new来实例化,而是直接用以上三步来实例化一个新对象,下面看代码:

function BaseClass(){
this.name = “我是一个类”;
}
BaseClass.prototype.str=”你好”;

//实例化步骤开始

var instace = {};//创建空对象instace。
instace .__proto__ = BaseClass.prototype;//prototype属性赋值,经过这步,instace 就可以访问定义在BaseClass的prototype上的变量或方法。

alert(instace.str);//输出“你好”。

但是光有这两步还不行,因为instace 不能访问BaseClass的内部变量。

alert(instace.name);//undefined

BaseClass.call(instace);//通过call能够让instace调用BaseClass的内部变量及方法。如果BaseClass是带参数的,比如function BaseClass(name,age){…},那么此处就要写成BaseClass.call(instace,“张三”,20)

alert(instace.name);//输出“我是一个类”

至此,实例化对象结束。所以,var instace= new BaseClass();就等于执行了以上三步。

我们可以再简化一下,因为有的高手写类的时候基本都喜欢先定义一个空类,所有的变量或者方法都是直接定义在类的prototype属性上,例如:

function BaseClass(){}

BaseClass.prototype.name = “我是一个类”;
BaseClass.prototype.str=”你好”;

那么new的过程实际上就可以省去第三步通过call来调用类的内部函数了。因为 BaseClass()本身就是空的,内部什么也没有。不过保险起见,第三步还是得必须加上。

理解new关键字的三个步骤,尤其是中间这一条:prototype属性赋值,将对类的继承有很大的帮助。

 

</script>

未经允许不得转载:前端撸码笔记 » js new 关键词加深理解

上一篇:

下一篇: