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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
javascript中indexOf技术详解
May 07 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
JavaScript仿京东轮播图效果
Feb 25 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
python脚本监控docker容器
2016/04/27 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
python读写json文件的简单实现
2017/04/11 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
python中的unittest框架实例详解
2021/02/05 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
应付会计岗位职责
2013/12/12 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
刑事撤诉申请书
2015/05/18 职场文书
MySQL创建管理子分区
2022/04/13 MySQL