JS基础（JS对象）

垦利不

于 2024-08-13 21:45:10 发布

阅读量342

点赞数 5

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_64450406/article/details/141172236

版权

JS对象创建的方法

1. 对象字面量法

var person = {  
    firstName: "John",  
    lastName: "Doe",  
    age: 50,  
    greet: function() {  
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);  
    }  
};  
  
person.greet(); // 输出: Hello, my name is John Doe

2. 构造函数法

使用构造函数来创建具有相同属性和方法的对象。

function Person(firstName, lastName, age) {  
    this.firstName = firstName;  
    this.lastName = lastName;  
    this.age = age;  
    this.greet = function() {  
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);  
    };  
}  
  
var person1 = new Person("John", "Doe", 50);  
person1.greet(); // 输出: Hello, my name is John Doe

3. 工厂函数法

工厂函数是简单地封装了创建对象的过程（分配内存、赋值初始值）并返回新创建的对象。

function createPerson(firstName, lastName, age) {  
    var obj = new Object("I am an Object"); // 创建一个新对象  
    obj.firstName = firstName;  
    obj.lastName = lastName;  
    obj.age = age;  
    obj.greet = function() {  
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);  
    };  
    return obj; // 返回对象  
}  
  
var person2 = createPerson("Jane", "Doe", 40);  
person2.greet(); // 输出: Hello, my name is Jane Doe

4. 原型链法

JavaScript 是一种基于原型的语言，它不使用传统的“类”模型，而是使用原型（prototypes）来实现对象的继承与复用。

function Person() {}  
  
Person.prototype.firstName = "John";  
Person.prototype.lastName = "Doe";  
Person.prototype.age = 50;  
Person.prototype.greet = function() {  
    console.log("Hello, my name is " + this.firstName + " " + this.lastName);  
};  
  
var person3 = new Person();  
person3.greet(); // 输出: Hello, my name is John Doe  
  
// 你可以覆盖实例的属性  
person3.firstName = "Jane";  
person3.greet(); // 输出: Hello, my name is Jane Doe

5. Object.create()

Object.create() 方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__（即原型）。

var personProto = {  
    firstName: "John",  
    lastName: "Doe",  
    greet: function() {  
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);  
    }  
};  
  
var person4 = Object.create(personProto);  
person4.greet(); // 输出: Hello, my name is John Doe  
  
// 你可以添加新的属性  
person4.age = 30;  
person4.greet(); // 输出: Hello, my name is John Doe

6.new object()

    var obj = new Object();
    obj.name = "John";
    obj.age = 30;
    obj.getInfo = function() {
        return "Name: " + this.name + ", Age: " + this.age;
    }
    console.log(13,obj.getInfo()); // Name: John, Age: 30

7. ES6 类

ES6 引入了class关键字（注意，这里的类不是传统面向对象编程中的类，而是JavaScript基于原型的类的语法糖），使得对象创建更加清晰和易于理解。

class Person {  
    constructor(firstName, lastName, age) {  
        this.firstName = firstName;  
        this.lastName = lastName;  
        this.age = age;  
    }  
  
    greet() {  
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);  
    }  
}  
  
var person5 = new Person("Alice", "Wonderland", 25);  
person5.greet(); // 输出: Hello, my name is Alice Wonderland

JS中访问对象的方法

1.对象名.属性/方法

2.对象名[‘属性’]

var person3 ={
    firstName: "Alice",
    lastName: "Smith",
    age: 35,
    greet: function() {
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);
    }

}
console.log(person3['age']);
console.log(person3.firstName + " " + person3.lastName)
person3.greet(); // 输出: Hello, my name is Alice Smith

2.定义类：定义一个类，并在其中定义方法。
创建对象实例：使用new关键字来创建类的实例。
调用方法：通过对象实例来调用其方法。

class MyClass {  
    // 定义方法  
    myMethod() {  
        console.log("Hello from myMethod!");  
    }  
}  
  
// 创建对象实例  
const myObject = new MyClass();  
// 调用方法  
myObject.myMethod();

变量、属性、方法、函数的区别

1.变量和属性

相同：都是用来存储数据的

不同：变量单独声明并赋值，使用的时候直接写变量名，单独存在

属性在对象中不需要声明，使用的时候必须对象.属性

2.函数和方法

方法是一种特殊的函数，它必须被对象所拥有，调用的时候必须对象.方法

函数是单独声明的，并且调用函数名（）是单独存在的

遍历对象

//遍历对象属性
var obj = {name: "yezi", 
age: 30, 
city: "New York"};
//for(变量 in 对象)
for(var i in obj){
    console.log(i + ":" + obj[i]);
}
//输出i是属性名，obj[i]是属性值
//一般使用for...in循环遍历对象的属性，喜欢用k或key来表示属性名，v或value来表示属性值。