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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
js 上传图片预览问题
Dec 06 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 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的FTP学习(三)
2006/10/09 PHP
php学习之运算符相关概念
2011/06/09 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
python3访问sina首页中文的处理方法
2014/02/24 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
openCV提取图像中的矩形区域
2020/07/21 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
小学语文业务学习材料
2014/06/02 职场文书
中国梦口号
2014/06/13 职场文书
违纪检讨书
2015/01/27 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书