问题

什么是构造函数?
构造函数与普通函数区别是什么?
用new关键字的时候到底做了什么?
构造函数有返回值怎么办?
构造函数能当普通函数调用吗?

this
this永远指向当前正在被执行的函数或方法的owner。例如:

1
2
3
4
5
function test(){
  console.log(this);
}
test();
//Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

上面这段代码中,我们在页面中定义了一个test()函数,然后在页面中调用。函数定义在全局时,其owner就是当前页面,也就是window对象。

this指向的几种情况

1.全局中调用

this.name //this指向window对象
    
2.函数调用

test();//test()函数中的this也指向window对象
    
3.对象的方法调用

obj1.fn();//obj1对象的fn()方法中的this指向obj1
    
4.调用构造函数
    var dog=new Dog();//构造函数内的this指向新创建的实例对象,也就是这里的dogcall和apply

call和apply的作用一样,只是接受参数的方式不一样,call接受的是多个单个参数,apply接受的是参数数组。
call和apply的作用简单地可以说成,当一个对象实例缺少一个函数/方法时,可以调用其他对象的现成函数/方法,其方式是通过替换其中的this为这个对象实例,改变函数运行时的上下文。
例如:

1
2
3
4
5
6
function Dog(){
  this.sound="汪汪汪";
}
Dog.prototype.bark=function(){
  alert(this.sound);
}

现在我有另外一个cat对象:

var cat={sound:'喵喵喵'}

我也想让这个cat对象可以调用bark方法,这时候就不用重新为它定义bark方法了,可以用call/apply调用Dog类的bark方法:

Dog.prototype.bark.call(cat);

或者:

dog.bark.call(cat);

加点东西,变成一个带参数的例子:

1
2
3
4
5
6
7
8
9
function Dog(){
  this.sound="汪汪汪";
}
Dog.prototype.bark=function(words){
  alert(this.sound+" "+words);
}
var dog=new Dog();
dog.bark("有小偷");//alert:汪汪汪  有小偷
Dog.prototype.bark.call(cat,"饿了");//alert:喵喵喵  饿了

普通函数
这是一个简单的普通函数:

1
2
3
4
function fn(){
  alert("hello sheila");
}
fn();//alert:hello sheila

普通函数与构造函数相比有四个明显特点:

1.不需要用new关键字调用

fn();2.可以用return语句返回值

1
2
3
4
function fn(a,b){
   return a+b;
 }
 alert(fn(2,3));//alert:5

3.函数内部不建议使用this关键字
我们说不建议使用,当然硬要用是可以的,只是要注意这时候发生了什么。如果在普通函数内部使用this关键字定义变量或函数,因为这时候this指向的是window全局对象,这样无意间就会为window添加了一些全局变量或函数。

1
2
3
4
5
6
function greeting(){
    this.name="sheila";
    alert("hello "+this.name);
  }
  greeting();//alert:hello sheila
  alert(window.name);//alert:sheila

4.函数命名以驼峰方式,首字母小写

构造函数
在JavaScript中,用new关键字来调用定义的构造函数。默认返回的是一个新对象,这个新对象具有构造函数定义的变量和函数/方法。

举个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
function Prince(name,age){
  this.gender="male";
  this.kind=true;
  this.rich=true;
  this.name=name;
  this.age=age;
}
Prince.prototype.toFrog=function(){
  console.log("Prince "+this.name+" turned into a frog.");
}
var prince=new Prince("charming",25);
prince.toFrog();//Prince charming turned into a frog.
prince.kind;//true

与普通函数相比,构造函数有以下明显特点:

1.用new关键字调用

var prince=new Prince("charming",25);

2.函数内部可以使用this关键字
在构造函数内部,this指向的是构造出的新对象。用this定义的变量或函数/方法,就是实例变量或实例函数/方法。需要用实例才能访问到,不能用类型名访问。

prince.age;//25
    Prince.age;//undefined

3.默认不用return返回值
构造函数是不需要用return显式返回值的,默认会返回this,也就是新的实例对象。当然,也可以用return语句,返回值会根据return值的类型而有所不同,细节将在下文介绍。

4.函数命名建议首字母大写,与普通函数区分开。
不是命名规范中的,但是建议这么写。

使用new关键字实例化的时候发生了什么?
以上文中的Prince()函数举个例子:

1.第一步,创建一个空对象。

var prince={}

2.第二步,将构造函数Prince()中的this指向新创建的对象prince。
3.第三步,将prince的_proto_属性指向Prince函数的prototype,创建对象和原型间关系
4.第四步,执行构造函数Prince()内的代码。

构造函数有return值怎么办?
构造函数里没有显式调用return时,默认是返回this对象,也就是新创建的实例对象。
当构造函数里调用return时,分两种情况:

1.return的是五种简单数据类型:String,Number,Boolean,Null,Undefined。
这种情况下,忽视return值,依然返回this对象。

2.return的是Object
这种情况下,不再返回this对象,而是返回return语句的返回值。

1
2
3
4
5
6
7
function Person(name){
    this.name=name;
    return {name:"cherry"}
  }
  var person=new Person("sheila");
  person.name;//cherry
  p;//Object {name: "cherry"}

转载于:https://www.cnblogs.com/ghlucky/p/5734729.html

JavaScript中的普通函数与构造函数比较相关推荐

  1. JavaScript中的工厂函数vs构造函数vs class

    原文链接:JavaScript Factory Functions vs Constructor Functions vs Classes 作者:Eric Elliott 译者:sunny 转载需提前 ...

  2. 如何找到JavaScript中的调用者函数?

    function main() {Hello(); }function Hello() {// How do you find out the caller function is 'main'? } ...

  3. 理解javascript中的回调函数(callback)【转】

    在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...

  4. 关于javascript中的回调函数

    关于javascript中的回调函数 原文地址:http://blog.csdn.net/sicluoyi/article/details/1737969 考虑一个这样的例子: 假如某个项目的底层和高 ...

  5. 深入认识javascript中的eval函数

    来源:http://wanyij.blog.51cto.com/46570/43794 发现为本文起一个合适的标题还不是那么容易,呵呵,所以在此先说明下本文的两个目的: (1)介绍javascript ...

  6. JavaScript中语句与函数的执行辨析

    文章出自个人博客https://knightyun.github.io/2018/05/23/js-anonymous-function,转载请申明. Javascript代码中,语句和函数以及匿名函 ...

  7. jQuery中的read 和JavaScript中 的onload函数的区别

    2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,onload函数是最经常用到的,这个函数的作用是等待网页完全加载之后再去执行代码块中的语句,因为按照 ...

  8. 在javascript中使用纯函数处理副作用

    在javascript中使用纯函数处理副作用 今天给大家带来一片译文, 详情请点击这里.可能在墙内哦 开始了, 如果你点开这篇文章, 就证明你已经开始涉及函数式编程了, 这距离你知道纯函数的概念不会很 ...

  9. 彻底搞懂javascript中的replace函数

    javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...

最新文章

  1. Windows下安装 openpyxl
  2. 四种数据持久化方式(上) :属性列表与归档解档
  3. Create 2021:李彦宏描绘未来交通图景 - 不限购、不限行、无拥堵
  4. Spring集成–从头开始应用程序,第1部分
  5. 产品经理应该先写需求文档还是先画原型?
  6. OpenStack点滴01-概览
  7. git 查看修改明细_Git(查看修改记录)
  8. 虚拟人出新晋卷王,无薪工作70天却没人认出来
  9. python实现三消游戏(消消乐)算法--简单案例
  10. Python-并发、并行、协成的简易理解
  11. matlab编写圆的公式,编写函数文件球半径为r的圆的面积周长 matlab
  12. algodoo是什么意思_洋是什么意思 带洋字的男孩名字 用洋字起名的寓意
  13. 二叉树的遍历(递归、非递归)
  14. linux基础操作之四
  15. vim只读模式修改文件
  16. 有关3DES、DUKPT和MK/SK学习记录
  17. 邮箱日期IP地址信用卡验证(正则表达式)
  18. 部门来了个卷王之王,真的让人奔溃
  19. 饱和非线性、非饱和非线性
  20. Android JSON原生解析的几种思路,以号码归属地,笑话大全,天气预报为例演示

热门文章

  1. java中double类型精度丢失问题及解决方法
  2. 如何把近十页的论文读成半页?
  3. Datawhale两岁啦!
  4. 天池NLP中文预训练模型赛来了!
  5. 浅谈数据分析的魅力和能力要求!
  6. 停课不停学 阿里云天池免费开放AI实训平台
  7. 机器学习面试必备 CheatSheet
  8. pandas语法乱、API多?你需要整理一下!
  9. 重大布局!北京大学,落子上海!
  10. 博士一次性最高给140万安家费!还享副教授待遇,这所高校为了引进人才!拼了...