对Js OOP编程 创建对象的一些全面理解


Posted in Javascript onJuly 26, 2016

面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物。

对象的含义

对象可以是汽车,人,动物,文字,表单或者任何存在的事物等等。

对象有:

属性-------对象的某些特定的性质。

方法-------对象能做的事情。

事件-------能响应发生在对象上的事情。

我们可以通过创建一个人的对象来理解面向对象

人:

两只手,两只脚,一个头,还可以跑动。

手,脚,头,是人的属性,跑动是人的方法。

首先,我们来用最简单的方法创建一个对象

var person = {
      head: "one",
      hand: "two",
      foot: "two",
      run : function(){
        console.log("running");
      }
    }

这个方法一点都不实用,因为它是创建一个单独的对象,,而这个对象和任何常见的数据结构没有任何联系。

然后,我们用构造函数的方式创建一个对象

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two",
      this.run = function(){
        alert("running");
      }
    }
    var Joan = new Person();
    document.write(Joan.run())// "running"

这是用构造函数创建的对象,然后我们再加上一行代码看看

var Niki = new Person();
    alert(Joan==Niki) //false;

是的,现在创建了是两个不同的对象实例。

在JavaScript中的每个函数都有一个prototype的属性.如果某个函数被用作构造函数,则这个属性会被自动通过new调用创建对象的原型

console.log(Joan)

可以看到有一个__proto__:Person,其中__proto__是Joan的原型链.它是指向Person的原型.

JS在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对象prototype。

关于原型链的一些理解,在JavaScript高级程序设计 一书中写的非常详细。有兴趣的可以去看看,网上也有pdf的文档可以找到。不过建议还是买本书,支持原版嘛。

然后对prototype这个原型属性的任何更改能够应用于用new Person()构造的每一个实例对象,不管它是在更改之前还是更改后创建.为Person.prototype 添加新函数.具体如下:

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two"
    }
    Person.prototype.run = function(){
      alert("running");
    }
    var Joan = new Person();
    Joan.run()// "running"
    alert(Joan.__proto__===Person.prototype)//'true'

可以看到,在原型中创建方法是可以调用的,同时Joan的原型链是指向Person的原型的。

再看:

var Niki = new Person();//"runing"
     Person.prototype.run = function(){
       alert("running running")
     }
     Joan.run()//"running running"
     Niki.run()//"running running"

看,修改Person的原型方法,所有被new Person()创建的对象实例中的方法都被修改了,因为所有实例中共用的是同一个原型方法run。这就是原型的一种应用。

这就是关于创建对象的一些理解。

写了好久。也不知道有没有错误。 如果有错误,欢迎各位大大指点。

下次再写面向对象继承方面的东西。

以上就是小编为大家带来的对Js OOP编程 创建对象的一些全面理解全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 #Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 #Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 #Javascript
前端微信支付js代码
Jul 25 #Javascript
javascript与jquery动态创建html元素示例
Jul 25 #Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 #Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 #Javascript
You might like
用缓存实现静态页面的测试
2006/12/06 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
对pandas中to_dict的用法详解
2018/06/05 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
Python文件操作函数用法实例详解
2019/12/24 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
酒店总经理欢迎词
2014/01/08 职场文书
安全生产月演讲稿
2014/05/09 职场文书
质量标语大全
2014/06/12 职场文书
升学宴演讲稿
2014/09/01 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书