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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
js 深拷贝函数
Dec 04 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
删除节点的jquery代码
Jan 13 Javascript
AngularJS语法详解
Jan 23 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
vue开发简单上传图片功能
Jun 30 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
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php共享内存段示例分享
2014/01/20 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
python 多个参数不为空校验方法
2019/02/14 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
服装设计行业个人的自我评价
2013/12/20 职场文书
经典商业广告词
2014/03/13 职场文书
校园标语大全
2014/06/19 职场文书
校庆口号
2014/06/20 职场文书
研究生求职自荐书
2014/06/23 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
清洁工岗位职责
2015/02/13 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL