文章导航

JavaScript 构造函数

2018-10-4 22:34| 作者: admin| 查看: 1147| 评论: 0|来自: 蚂蚁部落

函数是JavaScript中使用最为频繁的语法结构。

首先看几段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
function func(){
  console.log("蚂蚁部落");
}
func();

声明一个具名函数,并调用它,打印出字符串“蚂蚁部落”。

[JavaScript] 纯文本查看 复制代码运行代码
let func=function(){
    console.log("蚂蚁部落");
}
func();

声明一个匿名函数,并将其赋值给变量func,然后调用此函数。

最终打印出字符串"蚂蚁部落"。

[JavaScript] 纯文本查看 复制代码运行代码
let func = ()=>{
    console.log("蚂蚁部落");
}
func();

声明一个箭头函数,并调用他它,打印出字符串“蚂蚁部落”。

关于箭头函数可以参阅JavaScript 箭头函数一章节。

特别说明:箭头函数并不能用作构造函数。

一.普通函数与构造函数:

构造函数与普通函数身份的切换,在于函数的使用方式。

如果函数使用new调用,那么它被用作构造函数,否则被用作普通函数。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
function func(){
    this.webName="蚂蚁部落";
    this.address="青岛市南区";
    this.show=function(){
        console.log(this.webName);
    }
}
let ant=new func();
ant.show();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/223623x3y22s3ndt77z8oq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).使用new调用函数,此函数就被称作为构造函数。

(2).构造函数会创建一个对象。

(3).this指向构造函数创建的对象,并且继承了构造函数原型所指向的对象。

更多细节可以参阅如下两篇文章:

(1).new可以参阅JavaScript new 运算符一章节。

(2).原型可以参阅JavaScript prototype一章节。

二.构造函数中的return语句:

(1).没有return语句:

这是构造函数的普遍应用方式,构造函数的返回值就是对象实例。

在上面已经演示过了,下面再来看一个带有原型的。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
function func(webName,address){
    this.webName=webName;
    this.address=address;
    this.show=function(){
        console.log(this.webName);
    }
}
func.prototype.url="http://www.softwhy.com";
let oneAnt=new func("蚂蚁部落","青岛市南区");
let twoAnt=new func("百度","北京");
oneAnt.show();
twoAnt.show();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/223734gd69rvxn94z6xjpn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).具有return语句:

具有return语句的构造函数较为复杂一些。

如果构造函数中的return返回值不是对象,那和没有return语句完全一样。

[JavaScript] 纯文本查看 复制代码运行代码
function func(){
    this.webName="蚂蚁部落";
    this.address="青岛市南区";
    this.show=function(){
        console.log(this.webName);
    }
    return 2;
}
let ant=new func();
ant.show();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/223809ikxl3lugmsx7mu55.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

构造函数return语句返回值是2,但是和没有return语句一样,构造函数的返回值依然是对象实例。

如果return语句的返回值是一个对象,那么构造函数的返回值就是此对象。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(){
  this.webName="蚂蚁部落";
  return {
    age:6,
    url:"www.softwhy.com"
  }
}
let ant=new Antzone();
console.log(ant.constructor===Antzone);
console.log(ant.url);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/223836rjdvnavild0ll8lh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

有截图可见,如果return的返回值是一个对象,那么构造函数的返回值就是此对象。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部