对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 相关文章推荐
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
JS中的模糊查询功能
Dec 08 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
jQuery技巧总结
2011/01/01 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
javascript解析json实例详解
2014/11/05 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
详解JavaScript编程中的数组结构
2015/10/24 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python操作json的方法实例分析
2018/12/06 Python
python下载微信公众号相关文章
2019/02/26 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Django实现网页分页功能
2019/10/31 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
html5的localstorage详解
2017/05/09 HTML / CSS
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
医院合作协议书
2014/08/19 职场文书
红色革命电影观后感
2015/06/18 职场文书
运动会运动员赞词
2015/07/22 职场文书
Python绘制分类图的方法
2021/04/20 Python
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
python对文档中元素删除,替换操作
2022/04/02 Python