how2j.cn


工具版本兼容问题
在JavaScript中可以自定义对象,添加新的属性,添加新的方法


示例 1 : 通过new Object创建对象   
示例 2 : 通过function设计一个对象   
示例 3 : 为已经存在的对象,增加新的方法   

示例 1 :

通过new Object创建对象

edit
通过new Object()创建一个对象
运行效果
<script> var hero = new Object(); hero.name = "盖伦"; //定义一个属性name,并且赋值 hero.kill = function(){ document.write(hero.name + " 正在杀敌" ); //定义一个函数kill } hero.kill(); //调用函数kill </script>
<script>
var hero = new Object();
hero.name = "盖伦"; //定义一个属性name,并且赋值
hero.kill = function(){
  document.write(hero.name + " 正在杀敌" ); //定义一个函数kill
}
 
hero.kill(); //调用函数kill
 
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

通过function设计一个对象

edit
通过new Object创建对象有个问题,就是每创建一个对象,都得重新定义属性和函数。这样代码的重用性不好
那么,采用另一种方式,通过function设计一种对象。 然后实例化它 。
这种思路很像Java里的设计一种类,但是 javascript没有类,只有对象,所以我们叫设计一种对象
运行效果
<script> function Hero(name){ this.name = name; this.kill = function(){ document.write(this.name + "正在杀敌<br>"); } } var gareen = new Hero("盖伦"); gareen.kill(); var teemo = new Hero("提莫"); teemo.kill(); </script>
<script>
function Hero(name){
  this.name = name;
  this.kill = function(){
     document.write(this.name + "正在杀敌<br>");
  }
}

var gareen = new Hero("盖伦");
gareen.kill();

var teemo = new Hero("提莫");
teemo.kill();
 
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

为已经存在的对象,增加新的方法

edit
现在Hero对象已经设计好了,但是我们发现需要追加一个新的方法keng(),那么就需要通过prototype实现这一点
运行效果
<script> function Hero(name){ this.name = name; this.kill = function(){ document.write(this.name + "正在杀敌<br>"); } } var gareen = new Hero("盖伦"); gareen.kill(); var teemo = new Hero("提莫"); teemo.kill(); Hero.prototype.keng = function(){ document.write(this.name + "正在坑队友<br>"); } gareen.keng(); teemo.keng(); </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2018-03-24 关于对象的实例化?
怪咖小森

像上面的例题,创建了一个方法,也即是一个对象,相当于java中的类,那么它的实例化还是一个对象吗老师?




1 个答案

虚实恒
答案时间:2018-05-02
实例化也是通过方法创建的啊



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-09-10 prototype相当于对象方法,不适用prototype相当于类方法这句话怎么理解
junxiaoge

如标题




3 个答案

庄胜文
答案时间:2019-09-26
prototype 属性使您有能力向对象添加属性和方法。 语法:object.prototype.name=value 向对象添加属性和方法 有时您想要向给定类型的所有现有对象添加新的属性(或方法)。 有时您想向对象构造函数添加新的属性(或方法)。 使用prototype 属性 JavaScript prototype 属性允许您向对象构造函数添加新属性。

啾啾啾
答案时间:2018-05-03
不使用prototype相当于类方法 类方法在类被实例化之前就被加载了,实例化的时候会自动调用 在js里面如果不加prototype会相当于类方法吗(类方法不应该是在类里面吗) 怎么会相当于类方法呢。

how2j
答案时间:2017-09-11
不知道你的java熟悉吗?里面有对象方法和类方法这两个概念



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-08-19 示例3中用prototype增加新方法,可以把prototype去掉直接在函数中添加新方法,这种做法有没有问题.
2017-07-05 通过new Object创建对象的例子有错误
2017-06-26 es6 有class了


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 1 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-JavaScript-自定义对象 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图