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 相关文章推荐
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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中截取字符串支持utf-8
2007/01/18 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP编码转换
2012/11/05 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
详解python Todo清单实战
2018/11/01 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
pandas.cut具体使用总结
2019/06/24 Python
Django实现文件上传下载
2019/10/06 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
实习医生自我评价
2013/09/22 职场文书
博士生专家推荐信
2014/09/26 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
公务员政审材料范文
2014/12/23 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
2016春季运动会开幕词
2016/03/04 职场文书