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 构造函数 面相对象学习必备知识
Jun 09 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 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
B2K与车机的中波PK
2021/03/02 无线电
javascript知识点收藏
2007/02/22 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
node.js实现快速截图
2016/08/27 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
JavaScript数组的5种迭代方法
2017/09/29 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python中的asyncio代码详解
2019/06/10 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
tensorflow多维张量计算实例
2020/02/11 Python
使用Tkinter制作信息提示框
2020/02/18 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
大学生毕业自荐信
2013/10/10 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
文明倡议书范文
2014/04/15 职场文书
高一军训的心得体会
2014/09/01 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS