how2j.cn


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

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

示例 1 :

通过new Object创建对象

通过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设计一个对象

通过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 :

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

现在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
如标题




2 个答案

啾啾啾 答案时间: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了
2017-05-02 Function和function的关系




提问之前请登陆
关于 前端部分-JavaScript-自定义对象 的提问

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

上传截图