首页 > 代码库 > 面向对象相关知识总结

面向对象相关知识总结

2024-08-18 04:12:13   223人阅读

  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));报错不是这样用的!!
  10. //3.propertyIsEnumerable 表示参数是否是当前对象的可枚举(可以使用for in 遍历)属性
  11. //4.Object.defineProperty() 为一个对象定义一个属性
  12. Object.defineProperty(obj,"age",{
  13. set:function(value){
  14. if(typeof value ==="number"&& value >=18){
  15. this.age = value;
  16. }else{
  17. console.log("年龄未满18岁");
  18. }
  19. },
  20. get:function(){
  21. return age;
  22. }
  23. });
  24. var o1={};
  25. //添加了一个name属性，值为"高通"
  26. Object.defineProperty(o1,"name",{
  27. value:"高通"
  28. });
  30. //添加了一个不可枚举属性，值为"170"
  31. Object.defineProperty(o1,"length",{
  32. enumerable:false,
  33. value:"170"
  34. });
  36. //添加一个不可使用赋值运算符的属性
  37. Object.defineProperty(o1,"age",{
  38. writable:false,
  39. value:18
  40. });
  41. o1.age=30;
  42. console.log(o1.age);//18
  44. //定义一个不可被删除的属性
  45. Object.defineProperty(o1,"color",{
  46. configurable:true,//值为true表示该属性可以被删除，值为false表示该属性不可被删除
  47. value:"黄种人"
  48. });
  49. //定义一个只读(只能获取值)属性
  50. Object.defineProperty(o1,"number",{
  51. get:function(){
  52. return30;
  53. }
  54. });
  55. //定义一个只写属性
  56. Object.defineProperty(o1,"gender",{
  57. set:function(v){
  58. console.log(v);
  59. }
  60. });
  61. //5.instanceOf arr是否是Array的实例
  62. var arr=[1,2,3];
  63. console.log(arr instanceof Array);//true
  64. //constructor
  65. 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方法就使用了混入继承
  30. /*4.混入+原型继承*/
  31. //给Foo4.prototype混入一些新的方法
  32. functionFoo4(){}
  33. mixin(Foo4,{fn1:function(){},fn2:function(){}});
  34. //jQuery中的jQuery.fn.extend()就是使用了这个方法
    1. // jQuery.fn==jQuery.prototype
  35. jQuery.fn.extend=function(obj){
  36. for(var key in obj){
  37. jQuery.fn[key]=obj[key];
  38. }
  39. return jQuery.fn;
  40. };
  42. /*5.经典继承*/
  43. var obj5={name:"liying",age:18};
  44. functionFoo5(){};
  45. Foo5.prototype=obj5;
  46. //封装一个方法
  47. function getFun(obj5){//传入已知的对象
  48. function F(){}
  49. F.prototype=obj5;
  50. returnnew F();//将继承创建的对象返回
  51. }
  52. //经典继承在ES5中得到了实现,Object.create()
  54. /*6.借用构造函数实现继承*/
  55. functionFoo6(name,age){
  56. this.name=name;
  57. this.age=age;
  58. }
  59. functionNewFoo(name,age,number){
  60. Foo6.call(this,name,age);
  61. this.number=number;
  62. }
  63. //newFoo构造函数借用Foo6构造函数中的属性和方法
  64. var obj =newNewFoo("张三",18,10);
  65. 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();
  30. /*6.混合方式创建对象构造+原型*/
  31. functionPerson(name){
  32. var obj=newObject();
  33. obj.name=name;//不同的属性通过构造函数
  34. }
  35. 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
  12. /*3.构造函数调用*/
  13. var fns =new fn();//函数中的this指向函数的实例也就是fns
  14. //对于构造函数的返回值问题
  15. /*1.如果构造函数没有return语句,返回值默认为实例对象
  16. * 2.如果return 基本类型数据;返回值为实例对象
  17. * 3.如果return 对象;返回值为return中的对象
  18. * */
  19. console.log("****************");
  20. /*4.上下文调用模式call() apply()*/
  21. var obj4={
  22. say:function(){
  23. console.log("说话的方法");
  24. }
  25. };
  26. var obj5 ={name:"zhangsan"};
  27. //obj5对象想使用obj4的say方法
  28. obj4.say.call(obj5);
  30. /*
  31. * call(对象,参数1,参数2....)
  32. * apply(对象,[参数1,参数2,参数3])
  33. * */
4.原型链
技术分享
 
 
 
 
 
 



来自为知笔记(Wiz)



面向对象相关知识总结


联系
我们