对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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
Position属性之relative用法
Dec 14 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 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
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php去掉文件前几行的方法
2015/07/29 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
调试php程序的简单步骤
2019/10/04 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python的标准模块包json详解
2017/03/13 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
Python代码注释规范代码实例解析
2020/08/14 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
天游软件面试
2013/11/23 面试题
.net工程师笔试题
2012/06/09 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
导游词之南京中山陵
2019/11/27 职场文书
微信小程序和php的登录实现
2021/04/01 PHP