首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么在function上直接添加方法不像function.prototype那样工作?

在JavaScript中,每个函数都是一个对象,都有自己的属性和方法。当我们在函数上直接添加方法时,这些方法只能在该函数的实例上调用,而不能在该函数的原型上调用。

这是因为在JavaScript中,函数的原型是一个对象,它包含了可以被该函数的所有实例共享的属性和方法。当我们通过函数的原型添加方法时,这些方法会被该函数的所有实例继承,并且可以在实例中调用。

举个例子来说明这个问题:

代码语言:javascript
复制
function Person(name) {
  this.name = name;
}

// 在函数上直接添加方法
Person.sayHello = function() {
  console.log("Hello!");
};

// 在函数的原型上添加方法
Person.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

var person1 = new Person("Alice");

Person.sayHello(); // 输出 "Hello!"
person1.sayHello(); // 报错,sayHello is not a function

person1.sayName(); // 输出 "My name is Alice"
Person.sayName(); // 报错,sayName is not a function

在上面的例子中,我们在函数Person上直接添加了一个方法sayHello,但是我们无法通过实例person1来调用这个方法,因为它只能在函数本身上调用。

相反,我们在函数的原型上添加了一个方法sayName,这个方法可以被该函数的所有实例继承,并且可以在实例中调用。

总结起来,直接在函数上添加方法只能在函数本身上调用,而通过函数的原型添加方法可以在该函数的所有实例上调用。这是因为函数的原型是实现JavaScript中继承的机制,它允许我们在所有实例之间共享属性和方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript instanceof 运算符深入剖析

尽管不像 typeof 方法那样灵活,但是 typeof 方法返回 "object" 的情况下,instanceof 方法还是很有用的。...为什么 Object 和 Function instanceof 自己等于 true,而其他类 instanceof 自己却又不等于 true 呢?如何解释?...方法或者属性都是内部的, JavaScript 中不能直接使用。并且规范中说明,只有 Function 对象实现了 [[HasInstance]] 方法。...实际 Dojo 的内部,Foo 仍然只继承自 Aoo,而通过 mixin 机制把 Boo 类中的方法和属性拷贝到 Foo 中,所以当用 instanceof 运算符来检查是否是 Boo 的实例时,...所以 Dojo 为每个类的实例添加了一个新的方法叫 isInstanceOf,用这个方法来检查多重继承。

60020

Javascript之其实我觉得原型链没有难的那么夸张!

16、Object.isExtensible(),方法判断一个对象是否是可扩展的(是否可以它上面添加新的属性)。 17、Object.isFrozen(),方法判断一个对象是否被冻结。...注意:应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改。...这就是为什么会有奇葩的:Function.prototype是一个函数,但是Function.prototype的隐式原型又是Object.prototype。...如果是,那它可以添加属性么?如果不是,为什么可以使用原型链方法比如1..toString()(没写错,1..toString())呢?实际,通过字面量创建的值类型并不能完全的称之为“对象”。...但是它却可以使用原型链方法,究其原因,是因为js运行时给值类型做了一层包装,使其可以使用原型链方法。而并不是因为值类型本身就是对象。

69530

JS基础-01:原型了解

概要内容 原型 总结 ---- 接触JS之前,我工作过程中基本都是采用Java、C#、C++开发,也就是面向对象编程,对于类、继承都很熟悉,所以构建数据结构的时候,就会下意识的采用类来定义结构,...这让我搞得很懵逼,面向对象结构都定义,没有这么复杂,为了搞清这些概念决定仔细学习一下。...__proto__ === Function.prototype));//ture console.log("Function.prototype === Function.prototype:" +...constructor 属性 是【对象】独有的 prototype 属性 是【函数】独有的 函数也是一种对象,所以也具有__proto__、constructor 属性 总结:数据结构定义 实例属性:构造方法中定义..."地球"; } } 复制代码 复制代码 类的属性和方法 class Animal { //类的属性和方法 static material = "材质" static

25000

Javascript之其实我觉得原型链没有难的那么夸张!

16、Object.isExtensible(),该方法判断一个对象是否是可扩展的(是否可以它上面添加新的属性)。 17、Object.isFrozen(),该方法判断一个对象是否被冻结。...注意:应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改。...这就是为什么会有奇葩的:Function.prototype是一个函数,但是Function.prototype的隐式原型又是Object.prototype。...如果是,那它可以添加属性么?如果不是,为什么可以使用原型链方法比如1..toString()(没写错,1..toString())呢?实际,通过字面量创建的值类型并不能完全的称之为“对象”。...但是它却可以使用原型链方法,究其原因,是因为js运行时给值类型做了一层包装,使其可以使用原型链方法。而并不是因为值类型本身就是对象。

59620

JS面试必问-JS原型及原型链

为什么需要原型 js中万物皆对象,对象可以说是重中之重了。每一个对象都拥有自己的属性。但是在这个世界中有很多东西都是相似的,可以归为一类,他们有共同的方法和属性。不可能让每一个对象都定义一个属性吧。...那样太消耗内存了。所以,js中怎么才能让多个对象共享一个或多个方法呢?原型的出现就是为了解决这个问题。...因为Function.prototype是一个对象,所以他的构造函数是Object。...构造函数创建而来的,原型链机制解释为:函数对象的原型链中存在Function.prototype 所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型) 所有函数拥有prototype...不满足) 所有函数都是Function实例(包括Fuction本身) 对象的_proto_属性:创建对象时自动添加的,默认值为构造函数的prototype属性值 函数的所有实例对象自动拥有原型中的属性

1.5K20

原型和原型链的深入浅出

` console.log(a.length) // 89 在这里 a 只是一个字符串,不应该存在属性和方法,但事实他有自己的属性和方法为什么?...2.1 构造函数与普通函数的区别 命名规则,构造函数一般是首字母大写,普通函数一般是驼峰命名法; 调用时,普通函数是直接调用,构造函数通过 new 关键字来生成新的实例(对象)(函数对象); 构造函数使用...) Function.prototype 为什么是函数对象呢?...定义构造函数内部的方法,会在它的每一个实例都克隆这个方法;定义构造函数的 prototype 属性方法会让它的所有示例都共享这个方法,但是不会在每个实例的内部重新定义这个方法 .如果我们的应用需要创建很多新的对象...,并且这些对象还有许多的方法,为了节省内存,我们建议把这些方法都定义构造函数的 prototype 属性 当然,某些情况下,我们需要将某些方法定义构造函数中,这种情况一般是因为我们需要访问构造函数内部的私有变量

37330

图解JavaScript对象原型与原型链

__proto__ === Object.prototype // true 我们使用对象直接量{}创建的对象,和使用不常用的new Object()写法所创建的对象的原型也都是Object.prototype...__proto__ === Function.prototype // true 内置构造函数Function的原型和其它函数一样,也是Function.prototype,这就像是自己的原型就是自己身上的一个部分...的特殊之处在于,它是可执行的函数对象,不是普通对象: typeof Function.prototype // "function" 让我觉得JS强行自圆其说的一点是,虽然Function.prototype...__proto__ === Object.prototype // true 为什么Function.prototype作为一个函数,它的原型不应该是Function.prototype自身吗,规范就是这么规定的...世界最难的事情是从0生出1,无中生出有,Object.prototype就是照着null的样子创造了1,你说多伟大。

51920

彻底搞懂JS原型与原型链

图片可以看到obj确实多了一个sayHello的属性,值为一个函数,但是问题来了,obj上面并没有hasOwnProperty这个方法为什么我们可以调用呢?这就引出了 原型。...现在我们已经初步理解了原型和原型链,到现在大家明白为什么数组都可以使用push、slice等方法,函数可以使用call、bind等方法了吧,因为它们的原型链找到了对应的方法。...personAlet personA = new Person('张三')// personA的原型添加一个方法,以供之后Person创建的对象所共享personA....__proto__ === Function.prototype// Function.prototype为普通对象,构造函数为Object,所以有Function.prototype....,右边是一个构造函数,左边对象的原型链查找,知道找到右边构造函数的prototype属性就返回true,或者查找到顶层null(也就是Object.prototype.

1.4K20

彻底弄懂JS原型与原型链

图片可以看到obj确实多了一个sayHello的属性,值为一个函数,但是问题来了,obj上面并没有hasOwnProperty这个方法为什么我们可以调用呢?这就引出了 原型。...现在我们已经初步理解了原型和原型链,到现在大家明白为什么数组都可以使用push、slice等方法,函数可以使用call、bind等方法了吧,因为它们的原型链找到了对应的方法。...personAlet personA = new Person('张三')// personA的原型添加一个方法,以供之后Person创建的对象所共享personA....__proto__ === Function.prototype// Function.prototype为普通对象,构造函数为Object,所以有Function.prototype....,右边是一个构造函数,左边对象的原型链查找,知道找到右边构造函数的prototype属性就返回true,或者查找到顶层null(也就是Object.prototype.

1.1K40

原来你是这样的---原型和原型链

接下来,我们 先贴上这份多重继承的代码; 绘制流程图,根据流程图剖析原型链的秘密; 写些测试代码验证;   先贴上代码,每个子构造函数会在继承父级的基础,分别在构造函数里面和原型里面,自定义添加自己的属性和方法...;另外在Person原型写上和构造函数里面同名的属性和方法,用来验证同名方法名时,构造函数里面的方法和原型方法哪个优先执行;ProvincePerson上会重写从父级继承的方法,侧面粗略展示下面向对象的多态特性...:" + this.name); } console.log("********Person 构造函数 初始化********"); } //给Person的原型添加属性和方法 Person.prototype.age...new关键字,直接调用,这时候它们都是构造函数Function的实例对象,所以这时候它们有__proto__属性。...Function作为一个特殊的存在,特殊之处在于 Function.prototype = Function.

51710

四张图带你搞定原型和原型链

Function函数也是函数,刚刚我们说函数是通过new Function生成,但它是一种特殊的情况,不通过任何东西创建,它是JS引擎启动的时候直接添加到内存当中的。...原型,同理,我们自定义函数的原型必然指向自定义函数原型,这里有个比较特殊的点,就是Function函数,没有任何东西创建它,它是由JS引擎启动的时候直接添加到内存里面的,故Function函数直接指向Function...,由于没有谁创建它,是被直接添加到内存的,它的原型是指向Function原型,这同样是一个特殊点。...__proto__ === Function.prototype; // true 我们都知道所有的函数都有共同的成员,比如call、apply、bind等等,我们并没给自定义函数上加上这些成员,那么为什么可以使用呢...这是因为所有的函数的隐式原型指向Function的原型,这些方法都存在于Function的原型,所以每个函数都可以使用这些成员,这就是继承的效果。

38410

一张图带你搞懂Javascript原型链关系

当我们最低部的自定义对象身上寻找一个属性或方法找不到的时候,JS就会沿着这条原型链向上查找,若找到就返回,直到null还查不到就返回undefined。 ?...同样的,函数 -> Function原型 -> Object原型 -> null, 也形成了原型链。当我们函数身上调用一个方法或属性时,根据原型链的查找规则,会一直层层向上查找到null。...这也就是为什么,call、apply、bind这些函数是定义Function原型身上的,我们也能用Person.call、Person.apply这样调用;hasOwnProperty、isPrototypeOf...生产环境中,我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型,然后再来为原型添加方法/属性。...思考 Function原型都有什么? 执行下列代码,创建一个普通该函数。 function a(){} 观察window.a控制台的打印结果,展开a.

69240
领券