js之构造函数

最新推荐文章于 2026-06-21 09:58:57 发布

原创最新推荐文章于 2026-06-21 09:58:57 发布 · 182 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #java #html

收录于

文章介绍了JavaScript中的构造函数，如自定义的Person构造函数，以及构造函数的内部原理，强调了new操作符的使用和return在构造函数中的特殊性。同时，文章探讨了JavaScript中原始值与包装类的关系，例如Number、String和Boolean，说明了如何为原始值添加属性以及其背后的自动包装和销毁过程。

构造函数方法

系统自带的构造函数 new Object()
自定义

命名规则：大驼峰式命名规则

自定义构造函数写法

function Person (name,age,city) {
  this.name = name;
  this.age = age;
  this.city = city;
  this.say = function () {
    console.log(this.name + " hi")
  }
}
var person = new Person('zhangsan',30,'beijing');
var person1 = new Person('zhangsan1',20,'beijing');

构造函数内部原理

在函数体最前面隐式的加上this={}
执行this.xxx = xxx
隐式的返回this

冷门知识:有new不可以返回原始值，即如果在构造函数写return 原始值，会忽略掉依旧返回this

function Person (name,age,city) {
  //var this = {};
  this.name = name;
  this.age = age;
  this.city = city;
  //return this;
}

包装类 Number() ，String()，Boolean()

原始值不会有属性，但str.length不报错是因为会先包装类创建一个对象，然后给对象设置属性，最后销毁。

var num = 4
num.len = 5 // 不报错，会隐式包装类创建对象 Number(4),然后添加len,最后销毁
console.log(num.len) // undefined

var str = 'abcd'
str.length = 2 // new String('abcd').length=2,销毁
console.log(str) // abcd