大家好，今天我带大家学习一下js的OOP，
大家都知道，面向对象有三个基本特征，继承，封装和多态，面向对象的语言有那么几种，C++，PHP,JAVA等，而功能强大的JS可以模拟实现面向对象的两大特征，继承，和封装，无法实现多态，所以当有人对问你，js是一门面向对象的语言，你应该反驳他，js是一门基于对象的语言，不是面向对象，他就会觉得你很有学问。哈哈！
首先，我们学习一下，什么是对象呢，那就先了解一下类和对象是什么？
1、类：一类具有相特征（属性）和行为(方法)的集合
eg：人类--->属性，身高，体重，性别，方法：吃饭，说话，走路
2、对象：从类中，拿出具有确定属性值和方法的个体。
eg：张三--->属性，身高180 体重180，方法：说话-->我叫张三，身高180
大家知道什么是类什么是对象了吗？
两者有什么关系呢？
类是抽象的，对象是具体的，类是对象的抽象化，对象是类的具体化
类是一个抽象的概念只能说类有属性和方法，但是不能给属性附具体的值，
对象是一个具体的个例，是将类中的属性，进行具体赋值而来的个体
eg：张三是人类的一个个体，可以说张三的姓名叫张三，也就是张三对人类的每一个属性进行了具体的赋值，那么张三就是由人类产生的一个对象。
是不是通俗易懂呢。
下面我来使用一下类和对象：
首先创建一个类，这里要注意的是，类名必须使用大驼峰法则，即每一个单词的首字母都要大写，这是我说知道唯一一个使用大驼峰法则的地方
方法：
function 类名（属性1）{
this.属性1=属性1；
this.方法=function（）{
方法中要调用自身属性，必须使用this.属性。
}
}
function Person(name,age){ this.name=name; this.age=age; this.say=function(content){ //在类中，要访问类自身的属性，必须使用this，属性调用。 alert("我叫"+this.name+",今年"+this.age+"了！"+content); } }
这样我们就创建好了一个类
下面我们实例化出一个对象，
通过 obj=new类名（属性1的具体值）；
obj.属性；调用属性
obj.方法（）；调用方法
var zhangsan = new Person("张三",18);
下面我们要学习一下三个属性和三个方法
【成员属性和成员方法】
1、在构造函数中，使用this.属性声明。或者在实例化出对象以后，使用“对象.属性追加的，都属于成员属性或成员方法”。也叫实例属性，和实例方法。
成员属性和方法是属于由类new出的对象的。需要使用“对象名.属性名”调用。
【静态属性与静态方法】
2、 通过“类名.属性”、“类名.方法”声明的属性和方法，称为静态属性，静态方法。也就类属性和类方法：
类属性/类方法，是属于类的（属于构造函数的）
通过“类名.属性名”调用
3、成员属性时属于实例化出的对象的，只能使用对象调用。
静态属性时属于构造函数的，只能使用类名调用。
【私有属性和私有方法】
4、在构造函数中，使用var声明的变量称为私有属性；
在构造函数中，使用function声明的函数，称为私有方法；
function Person(){
var num = 1;//私有属性
function func(){}//私有方法
}
私有属性和私有方法的作用域，只能在构造函数内容有效，即，只能在构造函数内部使用，在构造函数外部，无论使用对象名还是类名都无法调用。
举个栗子，
function Person(name){ this.name=name;//声明成员属性 var sex = "男"; this.satTime=function(){ alert("说出当前时间是"+getTime()); } this.writeTime = function(){ alert("我写了当前时间是"+getTime()); } function getTime(){ return new Data(); } } var zhangsan = new Person("张三"); zhangsan.age = 14;//追加成员属性 //alert(zhangsan.age);//调用成员属性 Person.count = "60亿";//声明静态属性 console.log(Person.count);//调用静态属性 var lisi = new Person("李四"); console.log(lisi.count);//undefined 静态属性时属于类的，只能用类名调用 console.log(lisi.sex); console.log(Person.sex);
通俗易懂的，好了下面我们重点来了，就是标题的两大内容之一，封装
| 封装 |
1、 什么叫封装？
① 方法的封装： 将类内部的函数进行私有化处理，不对外提供调用接口，无法在类外部使用的方法，称为私有方法，即方法的封装。
② 属性的封装： 将类中的属性进行私有化处理，对外不能直接使用对象名访问(私有属性)。 同时，需要提供专门用于设置和读取私有属性的set/get方法，让外部使用我们提供的方法，对属性进行操作。 这就叫属性的封装。
2、 注意： 封装不是拒绝访问，而是限制访问。 要求调用者，必须使用我们提供的set/get方法进行属性的操作，而不是直接拒绝操作。
因此，单纯的属性私有化，不能称为封装！必须要私有化之后，提供对应的set/get方法。
上面是知识点，大家知道了吗，简单的讲，就是将属性保存起来，只让用户通过提供的方法去访问，修改数据，当然，如果你是前端高手，你就可以无视，直接修改源码。这当然是外话了 --!!
下面我们来一段实例代码，让你们感受下封装的过程
function Person(name, age1) { this.name = name; // this.age = age; var age = 0; this.setAge = function(ages) { if(ages > 0 && ages <= 120) { age = ages; } else { alert("年龄赋值失败！"); } } // 当实例化类拿到对象时，可以直接通过类名的()传入年龄，设置私有属性 if(age1 != undefined) this.setAge(age1); this.getAge = function() { return age; } //私有化的方法，只能在类内部被其他方法调用，而不能对外提供功能。 这就是方法的封装！ function getTime() { return new Date(); } } // var zhangsan = new Person("张三"); // zhangsan.setAge(99); // alert("张三的年龄是："+zhangsan.getAge()); var lisi = new Person("李四", 999); //lisi.setAge(110); alert("李四的年龄是：" + lisi.getAge()); function Person(){ var age = 0; this.getAge=function(){ return age; } this.setAge=function(age1){ age = age1; } function func(){} }
封装其实很简单，当我们把属性封装起来之后，我们就不能直接访问类的私有属性，我们只可以通过getAge()，setAge()访问设置age属性，这样就模拟实现了第一个功能，封装，
| 继承 |
等等，我忽略了一个重要的问题，那就是this指向问题，大家可能问上面我们出现了this，this到底是什么呢，现在我们详细解释一下
简单来说
1、谁最终调用这个函数，this就指向谁!
①this指向谁，不应该考虑函数在哪里声明，应该考虑函数在哪里调用；
②this指向的永远只可能是对象，不可能是函数；
③this指向的对象，叫做函数的上下文，也叫函数的context；也叫函数的调用者。
2、this指向的规律！！！(跟函数的调用方式息息相关)
①通过函数名()调用的this永远指向window；
②通过对象.方法调用的，this指向这个对象；
③函数作为数组中一个元素，通过数组下标调用的，this指向这个数组；
④函数作为window内置函数的回调函数使用；this指向window；
setInterval setTimeout 等
⑤函数作为构造函数时new关键字调用，this指向新new出的对象。
以上是我所总结的this指向，this也就这几中情况了，其他还没遇到过，如果有其他，请大佬在评论告诉我，先谢了，
在举个栗子
var fullname = 'John Doe'; var obj = { fullname: 'Colin Ihrig', prop: { fullname: 'Aurelio De Rosa', getFullname: function() { return this.fullname; } } }; console.log(obj.prop.getFullname()); // 函数的最终调用者 obj.prop var test = obj.prop.getFullname; console.log(test()); // 函数的最终调用者 test() this-> window obj.func = obj.prop.getFullname; console.log(obj.func()); // 函数最终调用者是obj var arr = [obj.prop.getFullname,1,2]; arr.fullname = "JiangHao"; console.log(arr[0]()); // 函数最终调用者数组
吃了这个栗子，是不是清楚多了，不要被歪的所迷惑，你就找谁最终调用了这个函数就行，
然后是原型和原型链，这个是很重要的知识点，大家一定要掌握好，因为继承需要准备很多知识点，大家耐心学完，
【__proto__与prototype】
1、prototype，函数的原型对象；
①只有函数才有prototype，而且所有函数，必有prototype
②prototype本身也是一个对象！
③prototype指向了当前函数所在的引用地址！
2、__proto__：对象的原型
①只有对象才有__proto__，而且所有对象必有__proto__
②__proto__也是一个对象，所以也有自己的__proto__，顺着这条线向上找的顺序，就是原型链
③函数、数组都是对象，都有自己的__proto__；
3、实例化一个类，拿到对象的原理？
实例化一个类，实际上是将新对象的__proto__，指向构造函数所在的prototype。
也就是说：zhangsan.__proto__==Person.prototype √
4、所有对象的__proto__延原型链向上查找，都将指向Object的prototype
Object的prototype的原型，指向null
【原型链的指向问题】
研究原型链的指向，就是要研究各种特殊对象的__proto__的指向问题。
1、通过构造函数，new出的对象。新对象的__proto__指向构造函数的prototype
2、函数的__proto__，指向了function()的prototype
3、函数的prototype的__proto__指向Object的prototype
(直接使用{}字面量声明。或使用new Object拿到的对象的__proto__ 直接指向Object的prototype)
4、Object的prototype的__proto__，指向null
Object作为一个特殊函数，他的__proto__指向function()的prototype
这是点先放这里了解释的很清楚，大家看了之后就清楚原型了，继承就需要几个知识点而已，
一、扩展Object实现继承
①声明父类
function Parent(){}
声明子类
function Son(){}
②通过prototype给object类添加一个扩展方法：
Object.prototype.extend=function(parent){
for(var i in parent){
this[i]=parent[i];
}
}
③分别拿到父类对象，和子类对象；
var p = new Person();
var s = new Student();
④用子类对象，调用扩展方法，实现继承操作；
s.extend(p);
3、实现继承的原理：
通过循环，将父类对象的所有属性和方法全部付给子类属性，关键点在for-in循环，即使不扩张object，也能通过简单的循环实现操作
4、扩展Object继承的缺点，
①，无法通过一次实例化，直接拿到完整的子类对象，而需要先拿到父类对象和子类对象两个对象，在手动合并
②扩展Object的继承方法，也会保留只在子类的对象上
/**/ function Person(name,age){ this.name = name; this.age = age; this.say = function(){ alert("我叫"+this.name); } } function Student(no){ this.no = no; this.Study = function(){ alert("我在学习！"); } } Object.prototype.extend1 = function(parent){ for(var i in parent){ this[i]=parent[i]; } } var p = new Person("张三",12); var s = new Student("123456"); s.extend1(p); console.log(s);
扩展继承我感觉很简单，以后要用的时候，只需要拿出扩展的extend1方法，就可以继承了，这个名字大家不要抄啊，可以.a.b都行，高兴就好
二 使用原型实现继承
①定义父类：
function Parent(){}
定义子类：
function Son(){}
②将父类对象，赋值给子类的prototype
son.prototype = new Person();
③拿到子类对象，就会将父类对象的所有属性和方法，添加到__proto__
var s = new Son();
使用原型继承的原理：
将父类对象，赋值给子类的prototype，那么父类对象的属性和方法就会出现在子类的prototype中。那么。实例化子类时，子类的prototype又回到子类对象的__proto__中，最终，父亲对象的属性和方法，会出现在子类的对象的__proto__中；
这种继承的特点
①子类自身的所有属性，都是成员属性，父类继承过来的属性，都是原型属性；
②依然无法通过一步实例化拿到完整的子类对象。
function Person(name,age){ this.name = name; this.age = age; this.say = function(){ alert("我叫"+this.name); } } function Student(no){ this.no = no; this.Study = function(){ alert("我在学习！"); } } Student.prototype = new Person("zhangsan",14); var s = new Student(); console.log(s);
原型继承是比较简单的，子类的Prototype指向父类new的对象，就可以实现继承啦！
三，
[call/bind/apply]
1、三个函数的作用：通过函数名调用着三个函数，可以强行将函数中的this指定为某个对象。
2、三个函数的写法（区别）：
call写法：func.call(func的this指向的obj，func参数1，func参数2，...);
apply写法：func.apply(func的this指向的obj,[func参数1，func参数2，...]);
bind写法：func.bind(func的this指向的obj)(func参数1，func参数2，...);
3、三个函数的唯一区别，在与接受func的参数列表的方式不同，除此之外，功能上没有任何差异！！
[使用call/bind/apply实现继承]
1、实现步骤：
①定义父类
function Perent(name){}
②定义子类时，在子类中使用三个函数，调用父类，将父类函数的this，指向为子类函数的this：
function Son(no,name){
this.no=no;
Person,call(this,name);
}
③实例化子类时，将自动继承父类属性，
var s = new Son(12,"zhangsan")
function Person(name,age){ this.name = name; this.age = age; this.say = function(){ alert("我叫"+this.name); } } function Student(no){ this.no = no; this.study=function(){ alert("我在学习"); } Person.call(this.name,age); } var s =new Student(12,"张三",24); console.log(s);
以上就是js的继承和封装，多态是无法实现的，上面两个方法在实际运用中能起到很不错的效果，让我们少码很多字，
今天就到这里，谢谢大家
扫一扫
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
