对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实现的类似购物商城的购物车
Dec 06 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
Vue Render函数原理及代码实例解析
Jul 30 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
python实现跨文件全局变量的方法
2014/07/07 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python collections模块的使用方法
2020/10/09 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
希特勒的演讲稿
2014/05/23 职场文书
医院搬迁方案
2014/06/14 职场文书
倡导文明标语
2014/06/16 职场文书
2014年话务员工作总结
2014/11/19 职场文书
单身申明具结书
2015/02/26 职场文书
小学教师工作总结2015
2015/04/07 职场文书
胡桃夹子观后感
2015/06/11 职场文书
小学生暑假生活总结
2015/07/13 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
python 如何在list中找Topk的数值和索引
2021/05/20 Python
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
python代码实现扫码关注公众号登录的实战
2021/11/01 Python