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获取复选框被选中值的简单方法
Jul 04 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
php判断当前操作系统类型
2015/10/28 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Django中提示消息messages的设置方式
2019/11/15 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
个人求职信范文分享
2013/12/13 职场文书
领导干部考察材料
2014/02/08 职场文书
捐资助学倡议书
2014/04/15 职场文书
毕业生实习证明
2014/09/19 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2015年纪委工作总结
2015/05/13 职场文书
催款函范文
2015/06/24 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书