对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 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
JavaScript中return用法示例
Nov 29 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
泛谈JS逻辑判断选择器 || &&
May 24 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 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
Oracle 常见问题解答
2006/10/09 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php目录操作实例代码
2014/02/21 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP精确计算功能示例
2016/11/29 PHP
php生出随机字符串
2017/07/06 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
详解js闭包
2014/09/02 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JavaScript闭包详解
2015/02/02 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
js中事件对象和事件委托的介绍
2019/01/21 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python中文编码问题小结
2014/09/28 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python数据结构之图的实现方法
2015/07/08 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
英语教育专业自荐信
2014/05/29 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
党员公开承诺书2015
2015/01/21 职场文书
2016党员入党决心书
2015/09/22 职场文书
部分武汉产收音机展览
2022/04/07 无线电