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遍历table表格中的某行某列并打印其值
Jul 08 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
理解javascript中的with关键字
Feb 15 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
js回到页面指定位置的三种方式
Dec 17 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php生成gif动画的方法
2015/11/05 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
小区停车场管理制度
2014/01/27 职场文书
物业消防安全责任书
2014/07/23 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
刑事附带民事代理词
2015/05/25 职场文书
小学校本教研总结
2015/08/13 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript