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 相关文章推荐
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
微信小程序实现留言板
Oct 31 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php 字符串替换的方法
2012/01/10 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
jquery插件之easing使用
2010/08/19 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
使用js画图之饼图
2015/01/12 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Django实现基于类的分页功能
2019/10/31 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
班组建设经验交流材料
2014/05/12 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
新教师个人工作总结
2015/02/06 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
Spring实现内置监听器
2021/07/09 Java/Android