面向对象相关知识总结

Posted 2020-08-16 itly

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)