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 变量作用域分析
Jul 04 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
jquery图片切换插件
Mar 16 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
js实现磁性吸附的示例
Oct 26 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仿ZOL分页类代码
2008/10/02 PHP
php截取视频指定帧为图片
2016/05/16 PHP
如何打开php的gd2库
2017/02/09 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Python实现包含min函数的栈
2016/04/29 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python多线程抽象编程模型详解
2019/03/20 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python字符串的拼接方法总结
2019/11/18 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
python实现同一局域网下传输图片
2020/03/20 Python
python退出循环的方法
2020/06/18 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
利用python 读写csv文件
2020/09/10 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
教师调动申请报告
2015/05/18 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript