2018-07-11 js方法体内使用this来初始化对象

  1. chrome ;控制台执行如下代码,弹出文字显示。

function Person(name) //带参数的构造函数
{
alert("Hello, I'm " + name);
};
Person("gates");

  1. 上述方法定义和使用只考虑方法的执行,且不保存状态,不会对其他对象、数据要影响(大多时候没有)——本身只是方法的执行,只关心传入了什么数据。
    适合纯粹的代码执行。

  2. 再看看下面的代码呢?
    function Person(name) //带参数的构造函数
    {
    this.name = name; //将参数值赋给给 this 对象的属性
    this.SayHello = function() {alert("Hello, I'm " + this.name);}; //给this对象定义一个SayHello方法。
    };
    var bill=new Person("gates");

  3. ;执行完#3发现,bill对象有变化了,有name属性还有子方法。想想以前,我们想要使用方法初始化一个对象,首先想到的是不是都是 方法 return一个对象回来再赋值给变量?!
    此处,方法没有return但是生成了持久的新的对象!这就是方法体里 this的与众不同。

  4. 下面就来看看我们习以为常的方法结尾return对象的写法:

    function Person(name) //带参数的构造函数
    {
    var tmp={};
    tmp.name = name; //将参数值赋给给 this 对象的属性
    tmp.SayHello = function() {alert("Hello, I'm " + this.name);}; //给this对象定义一个SayHello方法。
    return tmp;
    };
    var bill=new Person("gates");

  5. ;是不是发现this的妙用和return之间的关系了?this就是最简洁版的return嘛!
    this;指的是该方法作用于的对象。

  6. 虽然,这段程序达到了共享了一份方法代码的目的,但却不怎么
    优雅。因为,定义 SayHello 方法时反映不出其与 Person 类的关系。显然,JavaScript早想到了这一问题,她的设计者们为此提供了一个有趣的prototype概念。

JavaScript 的所有 function 类型的对象都有一个 prototype 属性。这个 prototype 属性本身又是一个 object 类型的对象,因此
我们也可以给这个 prototype 对象添加任意的属性和方法。既然 prototype 是对象的“原型”,那么由该函数构造出来的对象应该都会
具有这个“原型”的特性。事实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。
也可以这么说,prototype 提供了一群同类对象共享属性和方法的机制。

function Person(name)
{
this.name = name; //设置对象属性,每个对象各自一份属性数据
};

Person.prototype.SayHello = function()  //给 Person 函数的 prototype添加 SayHello方法。 
{ 
    alert("Hello, I'm " + this.name); 
} 

var BillGates = new Person("Bill Gates");   //创建 BillGates 对象 
var SteveJobs = new Person("Steve Jobs");   //创建 SteveJobs对象 

BillGates.SayHello();   //通过 BillGates 对象直接调用到 SayHello 方法 
SteveJobs.SayHello();   //通过 SteveJobs对象直接调用到 SayHello 方法 

alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享 prototype的 SayHello,所以显示:

true

  1. ;思考 : JavaScript 的所有 function 类型的对象都有一个 prototype 属性。
    只有function对象才有吗? string对象呢?
    如果string对象有,是因为它是由String function对象生成的吗?

所以才有了我们以前的定义:

String.prototype.bool = function() {
return (/^true$/i).test(this);
};

然后,testvalue="true", testvalue.bool()返回 true的效果?

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容