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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
jQuery使用手册之二 DOM操作
Mar 24 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
opencv 阈值分割的具体使用
2020/07/08 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python