甘肃龙网

  1. 首页 > 生活 > >

Object javascript基础--对象封装

生活百科构造函数

引言
说到对象，我想到一个成语叫作谈虎色变，对象应该说是中最难得一部分，原因呢，首先，js作为函数式编程语言，对象的实现方式跟java，c，c++等面向对象设计语言不一样；其次js面向对象编程属于高级程序员应该掌握的，对于初学者来讲，没有实践基础，凭空理解更是难上加难 。不过不用担心，我也不怎么会，我们就一起来探讨一下吧 。
1.对象封装
我们举个例子，大千世界，人心难测 。每个人都是独立的，有自己的思维，性别，年龄，会跑，会跳等等，人就是一个单位，一个整体，然后人与人之间才会有血缘关系，社会关系 。试想，一个人都不完整，还谈什么其他东西呢？所以我们的首先任务就是“造人”,造人的方式的有很多种，当然肯定不是你想的那种，哈哈！好，接下来，开始造人吧！
2.封装模式一：工厂模式
工厂模式的原理：在函数内部创建对象，对象属性由参数指定，方法也挂在对象上，最后返回这个对象 。相当于函数是一个造人工厂，一下子造了Tom,Linda两个人 。但是缺点是不知道这两个人什么类型的，你会说都是啊，对啊，你回答这个答案就像我问你你现在在哪？你说你在地球上一样的道理 。我们应该知道，js里所有事物都是类型，所以为了搞明白这两个人具体的类型，我们另有他法，那就是构造函数模式 。
function Person(name,sex){var o = new Object();o.name =name;o.sex = sex;o.say = function(){console.log(this.name + ' is '+ this.sex)};return o;}var Tom = Person('Tom','male');var Linda = Person('Linda','female');
3.封装模式二：构造函数模式
构造函数模式相比工厂函数就是知道Tom和Linda这两个人是类型，原理是new关键字默认执行了以下操作：
1.创建一个全新的对象
2.这个对象会被执行[[]]连接原型
3.函数调用中的this会绑定到新对象
4.如果函数没有返回其他对象，那么new 构造就会自动返回这个新对象
注意：这里我特意加粗这句话，因为文末讲的寄生构函数模式的理解需要仰仗这句话 。先透个底，如果函数像工厂函数那样返回了对象，那么new关键词也就不会执行默认操作 。
function Person(name,sex){this.name = name;this.sex = sex;this.say = function(){console.log(this.name + ' is '+ this.sex);}}var Tom = new Person('Tom','male');var Linda = new Person('Linda','female');
上述的原型链图示为：

Object javascript基础--对象封装

文章插图
.指向原型对象，而原型对象的属性指向构造函数，Tom和Linda实例继承了原型对象的属性，所以有下面的等式
console.log(Tom.constructor === Person.prototype.constructor && Tom.constructor === Person);//tureconsole.log(Linda.constructor === Person.prototype.constructor && Linda.constructor === Person);//ture
还提供了,验证实例与构造函数的关系
console.log(Tom instanceof Person);//trueconsole.log(Linda instanceof Person);//true
4.封装模式三：原型模式
构造函数有个弊端，就是每一次new一个对象的时候，其实都创建了各自的属性和方法，这些属性和方法是重复的，完全没必要嘛，代码量多，又浪费内存 。原型模式解决了这个问题，将公用方法和不变的属性挂在原型对象上 。
//构造函数模式new的实例，相同的属性和方法是不一致的，验证一下console.log(Tom.name === Linda.name);//falseconsole.log(Tom.sex === Linda.sex);//falseconsole.log(Tom.say === Linda.say);//false//不对就对了，下面是原型模式function Person(){}Person.prototype.name = 'Tom';Person.prototype.sex = 'male';Person.prototype.say = function(){console.log(this.name + ' is '+ this.sex);};var Tom = new Person();var Linda = new Person();


上一篇：没有了

下一篇：七色花故事简介 七色花故事简介80字