首页 > 奇闻 > 正文内容

JS创建对象中的方法有哪些?详解常用方式与示例

奇闻2025-05-28 06:19:02

你是不是经常听到“JS里的对象和方法”,但自己一写代码就懵?别慌,今天咱们就来掰扯清楚,??JS创建对象中的方法到底有哪些套路??,而且保证用最直白的语言和例子让你看懂!


一、最原始的方法:对象字面量直接写

??新手友好度:???????
如果你是纯小白,对象字面量就是你的“救星”。直接往对象里塞方法,就像往购物车里丢东西一样简单:

javascript复制
let cat = {
  name: "橘座",
  say: function() {
    console.log("喵~我是" + this.name);
  }
};
cat.say(); // 输出:喵~我是橘座

??关键点??:直接在对象内部用function定义方法,简单粗暴。但缺点也很明显——??复用性差??,每次都要重新写一遍方法,适合临时用的小对象。


二、构造函数:批量生产对象的“流水线”

??适用场景:需要大量相似对象时??
如果对象字面量是“手工定制”,构造函数就是“工厂批量生产”。咱们用new关键字来创建实例:

javascript复制
function Dog(name) {
  this.name = name;
  this.bark = function() {
    console.log(this.name + ":汪汪!");
  };
}
let dog1 = new Dog("二哈");
dog1.bark(); // 输出:二哈:汪汪!

??但这里有个坑!?? 用构造函数时,??每个实例的方法都是独立的??(比如dog1.barkdog2.bark不是同一个函数)。如果创建100个对象,内存里会有100个相同的方法副本,这得多浪费啊!


三、原型链大法:JS自带的“隐藏工具包”

??解决痛点:节省内存,方法共享??
JS给每个构造函数配了一个“共享仓库”(原型对象),把方法挂上去,所有实例都能用:

javascript复制
function Bird(name) {
  this.name = name;
}
// 方法挂在原型上
Bird.prototype.fly = function() {
  console.log(this.name + "扑棱翅膀起飞了~");
};
let bird1 = new Bird("小黄");
bird1.fly(); // 输出:小黄扑棱翅膀起飞了~

??优势对比表格??:

方法定义位置内存占用是否共享
构造函数内部?
原型对象?

??个人观点??:原型链是JS的灵魂设计,但新手容易绕晕。我的建议是——??先理解“共享方法”这个概念就行,细节慢慢啃??。


四、ES6类语法:现代JS的“甜味剂”

??一句话总结:写起来像Java,骨子里还是原型链??
如果你觉得构造函数和原型链太拗口,ES6的class会让你直呼真香:

javascript复制
class Car {
  constructor(brand) {
    this.brand = brand;
  }
  // 方法直接写在类里
  run() {
    console.log(this.brand + "狂飙中...");
  }
}
let myCar = new Car("五菱宏光");
myCar.run(); // 输出:五菱宏光狂飙中...

??划重点??:

  1. class本质还是基于原型链的语法糖(但对新手更友好)
  2. 方法默认绑定在原型上,??不用自己手动写prototype??
  3. 支持继承等高级功能(进阶后再学也不迟)

五、工厂函数:另辟蹊径的“手艺人”

??适合人群:不想用new关键字的人??
有些开发者讨厌newthis,于是搞出了工厂模式——像做饼干一样“返回”对象:

javascript复制
function createPerson(name) {
  return {
    name: name,
    greet() {  // ES6方法简写
      console.log("你好,我叫" + this.name);
    }
  };
}
let person = createPerson("张三");
person.greet(); // 输出:你好,我叫张三

??优缺点对比??:

  • ? 不用new,避免this指向问题
  • ? 无法利用原型链共享方法(每个对象独立)

个人观点时间

用哪种方式创建对象方法?我的经验是:

  1. ??小项目或临时用??→对象字面量,省时省力
  2. ??需要大量相似对象??→ES6类(现代开发主流)
  3. ??避免this坑爹??→工厂函数
  4. ??极致性能优化??→原型链

最后说句大实话——??没有绝对最好的方法,只有最适合当前场景的选择??。刚开始别纠结,先写起来,踩坑了再回头看看这些方法的特点,自然就懂了!

搜索