javascript 对象 与 prototype 原型用法实例分析


Posted in Javascript onNovember 11, 2019

本文实例讲述了javascript 对象 与 prototype 原型用法。分享给大家供大家参考,具体如下:

我们做程序开发的,经常面对的就是一个一个对象。那么在javascript中我们怎么去创建一个类以及一个对象呢?

<script type="text/javascript">
  //创建一个Test对象
  function Test(){
  }
  var test = new Test();
  //创建一个对象
  var obj = new Object();
  //json 对象
  var json1 = {};
</script>

类都有自己的属性和方法,我们怎么去定义

<script type="text/javascript">
  function Test(){
    this.name = "谭勇";
    this.age = 22;
    this.getName = function(){
      return this.name;
    }
    this.getAge = function(){
      return this.age;
    }
  }
  var test = new Test();
  console.log(test); //查看一下日志
  var obj = new Object();
  obj.name = "谭勇";
  obj.age = "22";
  obj.getName = function(){
    return this.name;
  };
  obj.getAge = function(){
    return this.age;
  };
  console.log(obj);  //查看下日志
  var json1 = {};
  json1["name"] = "谭勇";
  json1["age"] = 22;
  json1["getName"] = function(){
    return this.name;
  }
  json1["getAge"] = function(){
    return this.age;
  }
  console.log(json1); //查看下日志
</script>

构造方法

<script type="text/javascript">
  function Test2(name,age){
    this.name = name;
    this.age = age;
    this.getName = function(){
      return this.name;
    }
    this.getAge = function(){
      return this.age;
    }
  }
  var test2 = new Test2("谭勇",22);
  console.log(test2);  //查看下日志
</script>

行为有形参

<script type="text/javascript">
  function Test3(){
    this.demo = function(param_str){
      return param_str;
    }
  }
  var test3 = new Test3();
  console.log(test3.demo("aaaaaaaaaaaaaaaaaaaa"));
</script>

继承

<script type="text/javascript">
  function parent(){
    this.getStr = function(){
      return "test str";
    }
  }
  function son(){}
  son.prototype = new parent();
  var sona = new son();
  console.log(sona.getStr());
</script>

拷贝继承

<script type="text/javascript">
  function extend(Child, Parent) {
  
var p = Parent.prototype;
  

var c = Child.prototype;
  

for (var i in p) {
  


c[i] = p[i];
  

}
  }
  function parent(){
  }
  parent.prototype.getStr=function(){
    return "test str";
  }
  function son(){
  }
  extend(son,parent);
  var sona = new son();
  console.log(sona.getStr());
</script>

原型

原型是一个对象,其他对象可以通过它实现属性继承。
任何一个对象都可以成为原型么?

哪些对象有原型

所有的对象在默认的情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型(只有一种例外,默认的对象原型在原型链的顶端。)

<script type="text/javacript">
  var str = "谭勇";
  String.prototype.getName = function(){
    var strs = "";
    for(var i=0;i<this.length;i++){
      strs += this[i];
    }
    return strs;
  }
  console.log(str.getName());
  console.log(str);
  console.log(str[0]);
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jquery getJSON方法详细分析
Dec 26 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 #Javascript
Vue.js watch监视属性知识点总结
Nov 11 #Javascript
javascript数组的定义及操作实例
Nov 10 #Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 #Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 #Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 #Javascript
webpack4 optimization使用总结
Nov 10 #Javascript
You might like
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python登录系统界面实现详解
2019/06/25 Python
python实现自动化上线脚本的示例
2019/07/01 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python sorted对list和dict排序
2020/06/09 Python
python 常见的反爬虫策略
2020/09/27 Python
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
创先争优活动方案
2014/02/12 职场文书
海飞丝广告词
2014/03/20 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
上课不认真检讨书
2014/09/17 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
公司联欢会主持词
2015/07/04 职场文书