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


问答区域    
2024-07-26 关于 js 自定义对象的理解
虚心求学

可以使用方法来创建对象,比如 1.先声明一个方法 function Item(name){ this.name = name; this.show = function(){ console.log(this.name); } } 2.调用这个方法来初始化对象及其属性、方法 var sword = new Item("my sword"); item.show();//调用方法 以上过程是不是可以这么理解? 步骤一 相当于 java 声明一个构造函数,参数是 name , 构造函数使用 this 关键字指向 当前对象(item)。 js不需要写 class、类名 以及 class语句块 因为当前没有类的概念,只有对象。 因此直接写一个构造函数,构造函数的名字就是这个 对象的名字, 而步骤二 相当于 java New 一个对象,也就是实例化的过程。 之后实例化只需要调用这个函数即可。







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




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

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




1 个答案

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



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




2017-09-10 prototype相当于对象方法,不适用prototype相当于类方法这句话怎么理解
2017-08-19 示例3中用prototype增加新方法,可以把prototype去掉直接在函数中添加新方法,这种做法有没有问题.
2017-07-05 通过new Object创建对象的例子有错误


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

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

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

上传截图