面向对象相关知识总结

Posted itly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了面向对象相关知识总结相关的知识,希望对你有一定的参考价值。

  1. //1.hasOwnPrototype 判断是都是当前对象的自有属性
  2. var obj ={name:"zhangsan"};
  3. console.log(obj.hasOwnProperty("name"));//true
  4. //2.isPrototypeOf 判断是否是传入对象的原型对象
  5. functionFun(){}
  6. var fun=newFun();
  7. console.log(Fun.prototype.isPrototypeOf(fun));//true
  8. //console.log(obj.prototype.isPrototypeOf(obj));报错不是这样用的!!
  9. //3.propertyIsEnumerable 表示参数是否是当前对象的可枚举(可以使用for in 遍历)属性
  10. //4.Object.defineProperty() 为一个对象定义一个属性
  11. Object.defineProperty(obj,"age",{
  12. set:function(value){
  13. if(typeof value ==="number"&& value >=18){
  14. this.age = value;
  15. }else{
  16. console.log("年龄未满18岁");
  17. }
  18. },
  19. get:function(){
  20. return age;
  21. }
  22. });
  23. var o1={};
  24. //添加了一个name属性,值为"高通"
  25. Object.defineProperty(o1,"name",{
  26. value:"高通"
  27. });
  28. //添加了一个不可枚举属性,值为"170"
  29. Object.defineProperty(o1,"length",{
  30. enumerable:false,
  31. value:"170"
  32. });
  33. //添加一个不可使用赋值运算符的属性
  34. Object.defineProperty(o1,"age",{
  35. writable:false,
  36. value:18
  37. });
  38. o1.age=30;
  39. console.log(o1.age);//18
  40. //定义一个不可被删除的属性
  41. Object.defineProperty(o1,"color",{
  42. configurable:true,//值为true表示该属性可以被删除,值为false表示该属性不可被删除
  43. value:"黄种人"
  44. });
  45. //定义一个只读(只能获取值)属性
  46. Object.defineProperty(o1,"number",{
  47. get:function(){
  48. return30;
  49. }
  50. });
  51. //定义一个只写属性
  52. Object.defineProperty(o1,"gender",{
  53. set:function(v){
  54. console.log(v);
  55. }
  56. });
  57. //5.instanceOf arr是否是Array的实例
  58. var arr=[1,2,3];
  59. console.log(arr instanceof Array);//true
  60. //constructor
  61. console.log(Fun.prototype.constructor===Fun);//true
 

1.继承的六种方式

  1. /*实现继承的六种方式*/
  2. /*1.扩展原型对象的方法实现继承*/
  3. functionFoo1(){}
  4. //在Foo1函数上扩展一个fn1方法,由构造函数创建的对象都具有fn1这个方法
  5. Foo1.prototype.fn1=function(){};
  6. /*2.替换原型对象实现继承*/
  7. functionFoo2(){}
  8. //给Foo2函数的原型对象重新赋值,注意不要忘记添加constructor属性
  9. Foo2.prototype={
  10. constructor:Foo2,
  11. fn1:function(){},
  12. fn2:function(){}
  13. };
  14. /*3.混入继承*/
  15. //已知两个对象,obj2对象继承obj中的属性
  16. obj={name:"张三",age:16};
  17. obj2={};
  18. for(var key in obj){
  19. obj2[key]=obj[key];
  20. }
  21. //封装一个函数
  22. function mixin(target,source){
  23. for(var key in source){
  24. target[key]=source[key];
  25. }
  26. return target;
  27. }
  28. //jQuery中的extend方法就使用了混入继承
  29. /*4.混入+原型继承*/
  30. //给Foo4.prototype混入一些新的方法
  31. functionFoo4(){}
  32. mixin(Foo4,{fn1:function(){},fn2:function(){}});
  33. //jQuery中的jQuery.fn.extend()就是使用了这个方法
    1. // jQuery.fn==jQuery.prototype
  34. jQuery.fn.extend=function(obj){
  35. for(var key in obj){
  36. jQuery.fn[key]=obj[key];
  37. }
  38. return jQuery.fn;
  39. };
  40. /*5.经典继承*/
  41. var obj5={name:"liying",age:18};
  42. functionFoo5(){};
  43. Foo5.prototype=obj5;
  44. //封装一个方法
  45. function getFun(obj5){//传入已知的对象
  46. function F(){}
  47. F.prototype=obj5;
  48. returnnew F();//将继承创建的对象返回
  49. }
  50. //经典继承在ES5中得到了实现,Object.create()
  51. /*6.借用构造函数实现继承*/
  52. functionFoo6(name,age){
  53. this.name=name;
  54. this.age=age;
  55. }
  56. functionNewFoo(name,age,number){
  57. Foo6.call(this,name,age);
  58. this.number=number;
  59. }
  60. //newFoo构造函数借用Foo6构造函数中的属性和方法
  61. var obj =newNewFoo("张三",18,10);
  62. console.log(obj);//NewFoo {name: "张三", age: 18, number: 10}
2.创建对象的几种方式
  1. /*1.对象字面量*/
  2. var obj1 ={
  3. name:"zhangsan",
  4. age:18
  5. };
  6. /*2.构造函数创建对象*/
  7. functionFun(){}
  8. var obj2 =newFun();
  9. /*3.Object创建对象*/
  10. var obj3 =newObject();
  11. //动态的给obj3添加属性
  12. obj3.name="zhangsan";
  13. /*4.工厂模式*/
  14. //定义一个函数用来创建对象那个,只要调用一个这个函数就创建了以对象
  15. function createObj(name){
  16. var obj =newObject();
  17. obj.name=name;//变化的属性
  18. obj.sex="男";//这个方法创建的对象共有的方法
  19. obj.say=function(){
  20. console.log("说话的方法");
  21. }
  22. }
  23. /*5.原型创建对象*/
  24. //所有的属性方法都放在原型中,存在一个问题就是这样创建出来的实例对象是完全一致的
  25. functionRole(){}
  26. Role.prototype.name="zhangsan";
  27. Role.prototype.age=18;
  28. var role =newRole();
  29. /*6.混合方式创建对象构造+原型*/
  30. functionPerson(name){
  31. var obj=newObject();
  32. obj.name=name;//不同的属性通过构造函数
  33. }
  34. Person.prototype.sex="男";//共同的不会改变的属性放在原型中
3.函数调用的几种方式
  1. function fn(){
  2. console.log(this.name);
  3. return"fn函数的返回值";
  4. }
  5. /*1.方法调用*/
  6. //方法调用,this指向window,相当于是window调用
  7. fn();
  8. /*2.对象调用*/
  9. var obj={name:"zhangsan",fun:function(){console.log(this.name+"zhangsan的方法");}};
  10. obj.fun();//函数中的this指向obj
  11. /*3.构造函数调用*/
  12. var fns =new fn();//函数中的this指向函数的实例也就是fns
  13. //对于构造函数的返回值问题
  14. /*1.如果构造函数没有return语句,返回值默认为实例对象
  15. * 2.如果return 基本类型数据;返回值为实例对象
  16. * 3.如果return 对象;返回值为return中的对象
  17. * */
  18. console.log("****************");
  19. /*4.上下文调用模式call() apply()*/
  20. var obj4={
  21. say:function(){
  22. console.log("说话的方法");
  23. }
  24. };
  25. var obj5 ={name:"zhangsan"};
  26. //obj5对象想使用obj4的say方法
  27. obj4.say.call(obj5);
  28. /*
  29. * call(对象,参数1,参数2....)
  30. * apply(对象,[参数1,参数2,参数3])
  31. * */
4.原型链
 
 
 
 
 
 





以上是关于面向对象相关知识总结的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 面向对象开发知识基础总结

JavaScript必须了解的知识点总结。

JavaScript必须了解的知识点总结。

面向对象理解,封装继承多态知识总结

JS代码预解析原理函数相关面向对象

20182308 2019-2020-1 《数据结构与面向对象程序设计》第5周学习总结