对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 字符串连接[性能比较]
May 10 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
利用python批量检查网站的可用性
2016/09/09 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python学生管理系统学习笔记
2019/03/19 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
教师校本培训方案
2014/02/26 职场文书
公司离职证明标准范本
2014/10/05 职场文书
后勤个人工作总结
2015/02/28 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
《比的意义》教学反思
2016/02/18 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书