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 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
JS解密入门之凭直觉解
Jun 25 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 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
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python实现图像识别功能
2018/01/29 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Python实现像awk一样分割字符串
2020/09/15 Python
英国航空官网:British Airways
2016/09/11 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
八年级数学教学反思
2014/01/31 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript