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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-09-10 prototype相当于对象方法,不适用prototype相当于类方法这句话怎么理解
junxiaoge
如标题




1 个答案

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




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-08-19 示例3中用prototype增加新方法,可以把prototype去掉直接在函数中添加新方法,这种做法有没有问题.
司马懿曹操



示例3中用prototype增加新方法,可以把prototype去掉直接在函数中添加新方法,这种做法有没有问题.
<script>
function Hero(name){
  this.name = name;
  this.kill = function(){
     document.write(this.name + "正在杀敌<br>");
  }


  this.keng=function(){
document.write(this.name+"正在玩<br>");


  }
}
  
var gareen = new Hero("盖伦");
gareen.kill();
  
var teemo = new Hero("提莫");
teemo.kill();
  

  
gareen.keng();
teemo.keng();
  
</script>

							


1 个答案

how2j 答案时间:2017-08-21
prototype相当于对象方法,不适用prototype相当于类方法




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-07-05 通过new Object创建对象的例子有错误
2017-06-26 es6 有class了
2017-05-02 Function和function的关系




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

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图