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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP内核探索之变量
2015/12/22 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python采用Django开发自己的博客系统
2020/09/29 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
机械电子工程毕业生自荐信
2013/11/23 职场文书
怀念母亲教学反思
2014/04/28 职场文书
效能风暴心得体会
2014/09/04 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python