JS对象添加属性和方法的多种方式

 更新时间:2023年08月18日 09:46:40   作者:西晋的no1  
本文介绍了如何使用JavaScript对象添加属性和方法,通过实例演示了如何给对象添加属性,以及如何在对象中定义方法,具有一定的参考价值,感兴趣的可以了解一下

方式一:定义对象时,直接添加属性和方法

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.code = function(){
        console.log(this.name + " is coding");
    }
}
var xiaoming = new Person("xiaoming",10,"man");
console.log(xiaoming);// {name: "xiaoming", age: 10, sex: "man", code: ƒ}
xiaoming.code();// xiaoming is coding 

运行结果:

Person {

  name: 'xiaoming',

  age: 10,

  sex: 'man',

  code: [Function (anonymous)]

}

Xiaoming is coding

方式二:通过"对象.属性名"添加属性和方法

function Fruit(){}
var tomato = new Fruit();
tomato.name = "xihongshi";
tomato.color = "red";
tomato.use = function(){
    console.log(this.name + " can be to eat");
}
console.log(tomato);
tomato.use();

运行结果:

Fruit { name: 'xihongshi', color: 'red', use: [Function (anonymous)] }

Xihongshi can be to eat

方式三:通过"对象['属性名']"添加属性和方法

function Fruit(){}
var tomato = new Fruit();
tomato['name'] = "xihongshi";
tomato['color'] = "red";
tomato['use'] = function(){
    console.log(this.name + " can be to eat");
}
console.log(tomato);
tomato.use();

运行结果:

Fruit { name: 'xihongshi', color: 'red', use: [Function (anonymous)] }

Xihongshi can be to eat

方式四:通过 prototype (原型)添加属性和方法

function Animal(){};
Animal.prototype.foots = 4;
Animal.prototype.weight = 200;
Animal.prototype.hobby = "sing";
Animal.prototype.have = function(){
    console.log("the animal have " + this.foots + " foot");
}
var pig = new Animal();
console.log(pig);
pig.have();// the animal have 4 foot

运行结果:

Animal {}

the animal have 4 foot

方式五:使用Object.assign添加属性和方法

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.code = function(){
        console.log(this.name + " is coding");
    }
}
var xiaoming = new Person("xiaoming",10,"man");
console.log(xiaoming);// {name: "xiaoming", age: 10, sex: "man", code: ƒ}
xiaoming.code();// xiaoming is coding   
var xiaoming2 = Object.assign({}, xiaoming, {test1:'demo1', test2:'demo2'}); // 第一个参数是 目标对象,后面的全是源对象,执行完之后返回目标对象
console.log(xiaoming2);// {name: "xiaoming", age: 10, sex: "man", code: ƒ, test1: 'demo1', test2: 'demo2'}
xiaoming2.code();// xiaoming is coding   

运行结果:

Person {

  name: 'xiaoming',

  age: 10,

  sex: 'man',

  code: [Function (anonymous)]

}

xiaoming is coding

{

  name: 'xiaoming',

  age: 10,

  sex: 'man',

  code: [Function (anonymous)],

  test1: 'demo1',

  test2: 'demo2'

}

xiaoming is coding

方式六:使用扩展运算符...添加属性和方法

ES6新增语法,可以将两个对象合并成一个对象。将多个属性合并成1个对象。

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.code = function(){
        console.log(this.name + " is coding");
    }
}
var xiaoming = new Person("xiaoming",10,"man");
console.log(xiaoming);// {name: "xiaoming", age: 10, sex: "man", code: ƒ}
xiaoming.code();// xiaoming is coding   
var xiaoming2 = {...xiaoming, test1:'demo1', test2:'demo2'};
console.log(xiaoming2);// {name: "xiaoming", age: 10, sex: "man", code: ƒ, test1: 'demo1', test2: 'demo2'}
xiaoming2.code();// xiaoming is coding   

运行结果:

Person {

  name: 'xiaoming',

  age: 10,

  sex: 'man',

  code: [Function (anonymous)]

}

xiaoming is coding

{

  name: 'xiaoming',

  age: 10,

  sex: 'man',

  code: [Function (anonymous)],

  test1: 'demo1',

  test2: 'demo2'

}

xiaoming is coding

到此这篇关于JS对象添加属性和方法的多种方式的文章就介绍到这了,更多相关JS对象添加属性和方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript实现鼠标拖动改变层大小的方法

    javascript实现鼠标拖动改变层大小的方法

    这篇文章主要介绍了javascript实现鼠标拖动改变层大小的方法,涉及javascript操作鼠标事件及样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 不用ajax实现点击文字即可编辑的方法

    不用ajax实现点击文字即可编辑的方法

    本文给大家分享一段代码不使用ajax实现点击文字即可编辑的方法,代码简单易懂,需要的朋友参考下吧
    2007-12-12
  • ES6 Promise对象的应用实例分析

    ES6 Promise对象的应用实例分析

    这篇文章主要介绍了ES6 Promise对象的应用,结合实例形式分析了Promise对象原理与异步处理相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • JS实现Excel导出功能以及导出乱码问题解决详解

    JS实现Excel导出功能以及导出乱码问题解决详解

    这篇文章主要为大家详细介绍了JavaScript如何调用后台接口实现Excel导出功能以及导出乱码问题的解决办法,需要的小伙伴可以参考一下
    2023-07-07
  • JS生态系统加速Tailwind CSS工作原理探究

    JS生态系统加速Tailwind CSS工作原理探究

    这篇文章主要为大家介绍了JS 生态系统加速Tailwind CSS使用及工作原理探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • JavaScript如何检测并处理页面卡顿

    JavaScript如何检测并处理页面卡顿

    页面卡顿通常指的是网页的响应速度慢,用户的操作不能及时得到反馈,本文将为大家介绍如何使用JavaScript实现检测与处理页面卡顿,需要的可以了解下
    2025-03-03
  • Three.js实现3D机房效果

    Three.js实现3D机房效果

    这篇文章主要为大家详细介绍了Three.js实现3D机房效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JS图片轮播与索引变色功能实例详解

    JS图片轮播与索引变色功能实例详解

    本文通过实例代码给大家介绍了JS图片轮播与索引变色功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-07-07
  • ES6关于Promise的用法详解

    ES6关于Promise的用法详解

    本篇文章主要介绍了ES6关于Promise的用法详解,详细的介绍了Promise的三种状态和方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • JS检测数组类型的方法小结

    JS检测数组类型的方法小结

    这篇文章主要介绍了js检测数组类型的方法小结,有instanceof方法Array.isArray() 方法和Object.prototype.toString.call()方法,都是比较常用的,需要的朋友可以参考下
    2017-03-03

最新评论