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 相关文章推荐
列表内容的选择
Jun 30 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
node结合swig渲染摸板的方法
Apr 11 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
文件上传类
2006/10/09 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
angular.element方法汇总
2015/01/07 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
关于JS变量和作用域详解
2016/07/28 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python基于百度云文字识别API
2018/12/13 Python
python实现求特征选择的信息增益
2018/12/18 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
应届毕业生个人自荐信范文
2013/11/30 职场文书
大学生标准自荐书
2014/06/15 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
教师个人培训总结
2015/02/11 职场文书
2015年体育部工作总结
2015/04/02 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server