当前位置:首页 > JavaScript

js create实现

2026-04-06 06:43:22JavaScript

使用 document.createElement() 创建 DOM 元素

通过 document.createElement() 方法可以动态创建 HTML 元素。该方法接受一个字符串参数,指定要创建的标签名称,返回一个新创建的 DOM 元素。

const divElement = document.createElement('div');
divElement.textContent = 'This is a new div';
document.body.appendChild(divElement);

创建的元素不会自动添加到文档中,需要使用 appendChild() 或类似方法将其插入到 DOM 树中。

使用 new 关键字创建对象实例

在 JavaScript 中,可以通过构造函数和 new 关键字创建对象实例。构造函数通常以大写字母开头。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person = new Person('Alice', 30);
console.log(person.name); // 输出: Alice

ES6 引入了类语法,使得对象创建更加清晰:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

const person = new Person('Bob', 25);

使用 Object.create() 创建对象

Object.create() 方法创建一个新对象,使用现有的对象作为新创建对象的原型。

js create实现

const prototypeObj = {
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

const newObj = Object.create(prototypeObj);
newObj.name = 'Charlie';
newObj.greet(); // 输出: Hello, Charlie

这种方法允许实现纯净的原型继承,而不需要构造函数。

使用工厂函数创建对象

工厂函数是返回新对象的函数,可以封装对象创建逻辑。

function createUser(name, email) {
    return {
        name,
        email,
        getInfo() {
            return `${this.name} <${this.email}>`;
        }
    };
}

const user = createUser('Dave', 'dave@example.com');
console.log(user.getInfo());

工厂函数模式避免了使用 new 关键字和 this 绑定问题。

js create实现

使用 Array.from() 创建数组

Array.from() 方法从类数组或可迭代对象创建新数组。

const str = 'hello';
const charArray = Array.from(str);
console.log(charArray); // 输出: ['h', 'e', 'l', 'l', 'o']

const set = new Set([1, 2, 3]);
const arrayFromSet = Array.from(set);
console.log(arrayFromSet); // 输出: [1, 2, 3]

这个方法还可以接受映射函数作为第二个参数:

const numbers = [1, 2, 3];
const doubled = Array.from(numbers, x => x * 2);
console.log(doubled); // 输出: [2, 4, 6]

使用 new Array() 创建数组

虽然不推荐,但可以使用 new Array() 构造函数创建数组。

const emptyArray = new Array(); // 创建空数组
const sizedArray = new Array(5); // 创建长度为5的空数组
const filledArray = new Array(1, 2, 3); // 创建包含元素的数组

这种方法容易引起混淆(特别是单个数字参数时),建议使用数组字面量 [] 替代。

标签: jscreate
分享给朋友:

相关文章

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统的…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含inpu…

js jquery

js jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…