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中常见的字符串操作函数及用法汇总
May 04 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
js校验开始时间和结束时间
May 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php 常用类整理
2009/12/23 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
js简单时间比较的方法
2016/08/02 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python数据结构之图的应用示例
2018/05/11 Python
谈谈python垃圾回收机制
2020/09/27 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
一套C#面试题
2013/10/09 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2014年关工委工作总结
2014/11/17 职场文书
师德师风学习材料
2014/12/19 职场文书
幼儿学前班评语
2014/12/29 职场文书
物资采购管理制度
2015/08/06 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python