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 DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
JS实现拼图游戏
Jan 29 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
JS Date函数整理方便使用
2013/10/23 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
react的hooks的用法详解
2020/10/12 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python with语句和过程抽取思想
2019/12/23 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
MySQL面试题目集锦
2016/04/14 面试题
J2EE面试题集锦(附答案)
2013/08/16 面试题
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
美术教师个人总结
2015/02/06 职场文书
归途列车观后感
2015/06/17 职场文书
爱国主义主题班会
2015/08/14 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python