欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

浅谈JavaScript构造函数

程序员文章站 2022-04-05 15:06:10
...
提到“构造函数”,大部分人会联想到Java类的概念,JavaScript也有构造函数,其使用语法与Java或者其他基于类的语言中创建对象的语法相似。

JavaScript构造函数是一类比较特殊的函数,特点为:

  • new关键字调用函数

  • 函数首字母大写

面试中,我经常针对构造函数问两个问题:

  1. 构造函数首字母必须大写吗?

  2. 不用new关键字,直接运行构造函数,是否会出错?如果不会出错,那么,用new和不用new调用构造函数,有什么区别?

问题1基本100%都能答对(大小写都可以),问题2有20%同学会答错,尤其是第二问。

那么,让我们看看new操作符到底起到什么作用?

1. 使用new操作符调用函数

例子:

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = new Person('nicole');
person1.say(); // "I am nicole"

new调用构造函数,函数内部会发生如下变化:

  • 创建一个this变量,该变量指向一个空对象。并且该对象继承函数的原型;

  • 属性和方法被加入到this引用的对象中;

  • 隐式返回this对象(如果没有显性返回其他对象)

用伪程序来展示上述变化:

function Person(name){
  // 创建this变量,指向空对象
  var this = {}; 
  // 属性和方法被加入到this引用的对象中
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  // 返回this对象
  return this;
}

可以看出,用new调用构造函数,最大特点为,this对象指向构造函数生成的对象,所以,person1.say()会返回字符串: "I am nicole"。

小贴士

如果指定了返回对象,那么,"this"对象可能被丢失。

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  var that = {};
  that.name = "It is that!";
  return that;
}

var person1 = new Person('nicole');
person1.name; // "It is that!"

2. 直接调用函数

如果直接调用函数,那么,this对象指向window,并且,不会默认返回任何对象(除非显性声明返回值)。

还是拿Person函数为例,直接调用Person函数:

var person1 = Person('nicole');
person1; // undefined
window.name; // nicole

可见,直接调用构造函数的结果,并不是我们想要的。

3.小结

为了防止因为忘记使用new关键字而调用构造函数,可以加一些判断条件强行调用new关键字,代码如下:

function Person(name){
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa

以上就是浅谈JavaScript构造函数的详细内容,更多请关注其它相关文章!

相关标签: JavaScript