问JavaScript原型设计教程
EN

Stack Overflow用户

提问于 2009-08-29 06:07:14

回答 4查看 396关注 0票数 2

我有一个有很多函数的JS脚本，最重要的是：

function id(i) {
    if(document.getElementById)
        return document.getElementById(i);
    return;
}

每次输入document.getElementById()都可以节省很多字节。我的问题是我经常在元素中添加和删除类和其他属性。我希望能够做到这一点：

id('main').addClass("someClass");

有没有人知道什么好的Javascript原型教程可以解释这一点？谢谢。

javascript

function

getelementbyid

prototyping

回答 4

Stack Overflow用户

回答已采纳

发布于 2009-08-29 06:13:23

你正在寻找的技术是方法链。基本上，"id“函数应该返回一个带有"addClass”方法的对象实例。该方法将“返回this”。

这里有一个教程解释了这个概念：

http://javascriptant.com/articles/32/chaining-your-javascript-methods

我也强烈推荐这本书来学习更多像这样的技术(是的，链接已经涵盖) :-)

http://jsdesignpatterns.com/

票数 1

Stack Overflow用户

发布于 2009-08-29 06:12:50

我不得不问:你有没有考虑过只使用像jQuery这样的东西？如果你这样做了，问题就会变成：

$("#main").addClass("someClass");

你就完事了。如果目标是自己实现这一点(如果是，为什么？)然后你只需要知道，如果一个元素有3个类，那么实际的属性就是：

"one two three"

当然，另一个方面是编写扩展方法。

票数 4

Stack Overflow用户

发布于 2009-08-29 06:14:02

您不可能在所有浏览器中都能做到这一点，特别是不可能在IE6或7中扩展元素上可用的方法。

老实说，如果您在开发中只包含JQuery，您将节省大量的时间。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/1351527

复制

javascript设计模式五：原型模式

javascript 面向对象编程 vue.js ecmascript 编程算法

在javascript语言中，原型与原型链是一个非常重要的概念，因为它们是javascript语言得以成立的根本。因为javascript是基于原型的面向对象编程语言，这有别于基于类的java、python等面向对象编程语言。虽然javscript现在也有了class，但它骨子里还是个基于原型的语法糖罢了。所以在使用javascript时，始终要记清基于原型，基于原型，基于原型。

前端_AWhile

2019/08/29

3060

《现代Javascript高级教程》JavaScript中的原型与继承

javascript 对象继承教程原型

JavaScript是一门支持面向对象编程的语言，它的函数是第一公民，同时也拥有类的概念。不同于传统的基于类的继承，JavaScript的类和继承是基于原型链模型的。在ES2015/ES6中引入了class关键字，但其本质仍然是基于原型链的语法糖。

linwu

2023/07/27

2470

【JavaScript】原型与原型链

javascript 面向对象编程 ecmascript

每个函数都会创建一个prototype属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。实际上，这个prototype对象就是通过调用构造函数创建的对象的原型，使用原型对象的好处是，在它上面定义的属性和方法可以被所有实例对象共享。原来在构造函数中直接赋值给对象实例的值，可以直接赋值给它们的原型，如下所示：

CODER-V

2023/03/14

3620

JavaScript原型、原型链及原型链污染

javascript 面向对象编程

因为在CTF中时常也会考察原型链污染的问题，以前也一直让我捉襟见肘，一直没有系统的学习了解过JS原型的这些相关概念，因此写下本文，通过不断总结大佬的文章，写出自己对于此部分内容的理解。同时建议学习本文前要有对面向对象部分知识的一定理解（无论哪种语言）。

字节脉搏实验室

2020/07/28

1.1K1

JavaScript深入原型到原型链

javascript 面向对象编程

在这个例子中，Person就是一个构造函数，我们使用new创建了一个实例对象person。

挨踢小子部落阁

2019/07/02

5130

浅谈JavaScript原型和原型链

javascript

昨天说的构造函数的小问题，我们可以用原型模式来解决，我们可以先看一下(工厂函数和构造函数 ) 直接上代码。

大熊G

2022/11/14

2950

Javascript 原型链

其他

本来想写一篇“如何用JS实现面向对象”，发现自己对prototype原型链还是有很多的不理解的地方。先看一张原型链关系图：

mmzhou

2018/08/06

5660

javascript 原型及原型链详解

javascript

我们创建的每个函数都有一个 prototype （原型）属性，这个属性是一个指针，指向一个原型对象，而这个原型对象中拥有的属性和方法可以被所以实例共享。 function Person(){ } Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1

柴小智

2018/04/10

7730

[我的理解]Javascript的原型与原型链

java ecmascript json

一、原型与原型链的定义原型：为其他对象提供共享属性的对象注：当构造器创建一个对象，为了解决对象的属性引用，该对象会隐式引用构造器的"prototype"属性。程序通过constructor.prototype可以直接引用到构造器的"prototype"属性。并且添加到对象原型里的属性，会通过继承与所有共享此原型的对象共享。原型链：每个由构造器创建的对象，都有一个隐式引用(叫做对象的原型)链接到构造器的"prototype"属性。再者，原型可能有一个非空隐式引用链接到它自己的原型，以此类推，这叫

sam dragon

2018/01/17

8630

JavaScript核心概念-原型、原型链

javascript

每个函数都有一个prototype属性，那这个属性到底是指向哪里呢？是这个函数的原型吗？

程序员不务正业

2021/05/06

6120

图解 JavaScript 原型与原型链

javascript java 编程算法面向对象编程

原型在平时工作中用得比较少, 但原型是 JavaScript 中的基础, 是构建大型应用, 框架不可或缺的一环, 是你在写代码时, 不知不觉就应用上了的一个最基础的知识.

winty

2020/02/13

9100

JavaScript原型链

javascript

JavaScript中的原型链是一种机制，用于实现对象之间的属性和方法的继承。原型链由对象的隐式原型（[[Prototype]]）组成，它允许对象在找不到属性或方法时向上查找并在原型链中的上级对象中查找。

堕落飞鸟

2023/05/17

1840

javaScript原型链

javascript 编程算法数据结构面向对象编程

javaScript原型链概念 JavaScript之继承（原型链）数据结构 var Person = function(){}; Person.prototype.type = 'Person'; Person.prototype.maxAge = 100; 分支主题 prototype(原型) constructor(构造方法) Person.prototype.constructor === Person; 自己的构造,指向自己. 无限循环 proto(原型链) Person.prototype.proto === Object.prototype 指向Object对象prototype(原型) proto(原型链/遗传进化链) 第一层指向,Function对象prototype(原型) 分支主题 Person.proto === Function.prototype 同时Function对象的proto(原型链)也指向Function的prototype(原型) Function.proto === Function.prototype 第二层指向,Object对象prototype(原型) 分支主题 Person.proto.proto === Object.prototype 第三次指向,null Person.proto.proto.proto === null var p = new Person(); console.log(p.maxAge); p.name = 'rainy'; 分支主题实例对象没有prototype原型属性仅具有proto(原型链) 第一层指向,Person对象prototype(原型) new Person().proto === Person.prototype 第二层指向,Object对象prototype(原型) new Person().proto.proto == Object.prototype 第二层指向,还等同Person对象的第二层指向 new Person().proto.proto === Person.proto.proto 第三次指向,null new Person().proto.proto.proto === null prototype、proto的关系 dir(Array) 分支主题 dir(new Array()) new Array().proto === Array.prototype true Array.prototype 分支主题 Array. 分支主题可访问form直接方法也可访问Array.proto内方法也可访问Array.proto.proto.... 内方法[继承] 检验是否非进化链proto继承的属性分支主题 .hasOwnProperty("") 构造指向自己 Array.prototype.constructor === Array true Array.prototype.constructor.prototype.constructor.prototype.constructor .... function Array() { [native code] } proto 分支主题遗传进化链 or 进化链指针进化链指针 new String().proto === String.prototype JS内置构造器和自定义函数都是Function构造器的原型(prototype) Array.proto === Function.prototype true String.proto === Function.prototype true Function.proto === Function.prototype true 只有Function.prototype是函数(function)类型分支主题为了保证函数构造器们的proto指向的都是函数不能new的目标分支主题没有构造函数(不是函数),不能new 分支主题分支主题 function才有构造,object没有继承控制 Object Object.setPrototypeOf(child, parent); Object.prototype.extend class class Porsche extends Car function inherits(Chinese, People) & People.call(this, name, age) inherits(Chinese, People) 分支主题分支主题分支主题作用 c

达达前端

2020/05/09

5040

Javascript 原型链

javascript

每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

超级大帅比

2021/09/06

5780

设计模式(7)[JS版]-JavaScript设计模式之原型模式如何实现？？？

面向对象编程 javascript actionscript

原型模式（prototype）是指用原型实例指向创建对象的种类，并且通过拷贝这些原型创建新的对象。原型模式不单是一种设计模式，也被称为一种编程泛型。从设计模式的角度讲，原型模式是用于创建对象的一种模式。我们不再关心对象的具体类型，而是找到一个对象，然后通过克隆来创建一个一模一样的对象。在其他语言很少使用原型模式，但是JavaScript作为原型语言，在构造新对象及其原型时会使用该模式。

AlbertYang

2020/09/08

1.2K0

JavaScript进阶--原型、原型链、闭包

javascript

在JavaScript中，每个函数都有一个prototype属性，当一个函数被用作构造函数来创建实例时，这个函数的prototype属性值会被作为原型赋值给对象实例（也就是设置实例的__proto__属性），也就是说，所有实例的原型引用的是函数的prototype属性。

软件架构师Michael

2022/08/09

5060

再解 JavaScript 原型与原型链

javascript

JavaScript 原型与原型链虽然是一个老生常谈的话题，但依然困惑着很多人，今天我再来从另一个角度谈谈这个问题。

编程三昧

2022/02/02

3630

图解JavaScript对象原型与原型链

javascript

原文链接：http://www.shuaihuajun.com/article/javascript-prototype-chain/

陈帅华

2019/07/22

5530

Javascript原型，原型链？有什么特点？

javascript 面向对象编程

继承: 在创建子对象时，new的第2步自动设置子对象继承构造函数的原型对象

TimothyJia

2022/05/05

7340

Mockplus教程：分分钟搞定APP首页原型设计

其他

Mockplus是一款快速原型设计工具，支持包括APP原型在内的多种原型与线框图设计。除了快速，Mockplus广受欢迎更因为它极低的上手门槛。今天小编就为大家展示如何用Mockplus在3分钟内完成

奔跑的小鹿

2018/03/16

2K0

相似问题

Javascript原型设计

Javascript:复合设计与原型设计

用Javascript构造函数进行原型设计

javascript:使用多个对象进行原型设计

Javascript继承与揭示的原型设计模式

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问JavaScript原型设计教程
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

Javascript原型设计

Javascript:复合设计与原型设计

用Javascript构造函数进行原型设计

javascript:使用多个对象进行原型设计

Javascript继承与揭示的原型设计模式

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript原型设计教程EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

Javascript原型设计

Javascript:复合设计与原型设计

用Javascript构造函数进行原型设计

javascript:使用多个对象进行原型设计

Javascript继承与揭示的原型设计模式

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript原型设计教程
EN