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

古城微笑少年丶 2023-10-14 22:16 72阅读 0赞

## **方式一：定义对象时，直接添加属性和方法** ##

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

发表评论取消回复

表情：

评论列表（有 0 条评论，72人围观）

还没有评论，来说两句吧...

相关阅读

相关多种方式给JS对象添加属性和方法

方式一：定义对象时，直接添加属性和方法 function Person(name,age,sex){ this.name = name;

古城微笑少年丶/ 2023年10月14日 22:16/ 0 赞/ 73 阅读

相关 JS创建对象多种方法

例如：创建一个文件的对象，文件有大小，文件有创建日期，文件可以移动 //（1）使用函数兼new Object方法创建 function creat

分手后的思念是犯贱/ 2022年09月26日 01:46/ 0 赞/ 231 阅读

相关动态给类和对象添加属性和方法

动态给类和对象添加属性和方法动态给类和对象添加属性定义一个Person类 class Person(object): def __in

Myth丶恋晨/ 2022年06月07日 11:58/ 0 赞/ 297 阅读

相关 js prototype 添加属性和方法

假设现在有个字符串，即String 对象， var str="abcd"; 我们知道str.length 可以求出字符串的长度，这个length 就是String 的属性；

水深无声/ 2022年05月28日 05:35/ 0 赞/ 233 阅读

相关给java对象动态的添加属性

![抓狂][crazy.gif]、不知道大家有没有遇到过这样的需求，就java运行的时候动态给你java对象添加属性，最近在项目终于到了，想到了反射去实现，但是最终也没有搞

ゞ浴缸里的玫瑰/ 2022年05月14日 05:29/ 0 赞/ 2764 阅读

相关给 json对象添加属性的5种方式

1. 直接 json对象点属性添加 var test=\{name:"name",age:"12"\}; test.id = "12345"; 2. json对象

不念不忘少年蓝@/ 2022年05月10日 04:40/ 0 赞/ 242 阅读

相关 js 给json对象新增属性，再给新添加的属性添加值

json = \{id:'123',name:'张三'\} 添加一个 status 属性: json.newParam ='status';

我会带着你远行/ 2022年04月15日 02:46/ 0 赞/ 516 阅读

相关 vue中给对象添加属性

vue中给对象添加属性当我们从后台获取到对象后，给获取的对象添加一个新属性使用this.$set(a,b,c)添加新属性这里有a,b,c三个参数 a:对

心已赠人/ 2022年03月17日 13:20/ 0 赞/ 1086 阅读

相关 JS创建对象的多种方式

一、对象字面量创建 var person = { name: 'Jack', age: 18, sayName: funct

Dear 丶/ 2021年09月19日 00:06/ 0 赞/ 503 阅读

相关 js 对象动态添加属性、合并属性

1、对象合并： var obj = {a:1, name: 'test'}; var shuxing = {name:"super",sex:"19",wor

旧城等待，/ 2021年06月24日 14:00/ 0 赞/ 1008 阅读