zoukankan      html  css  js  c++  java
  • 面向对象

    一、面向对象概念

                 * 面向对象
                 *     它是一种编程思想
                 * 
                 * 对象
                 *     可以添加属性(变量)与方法(函数)的
                 * 
                 * 
                 * 面向对象的写法特点
                 *     1、把功能写成一个函数
                 *     2、函数必需在对象身上,调用的时候拿对象.方法名()
                 *     3、对象身上的功能可以继承
    例:系统本身自带的
    1. var date=new Date();
    2. date.getTime();
    3. date.getHours();
    4. var arr=new Array(1,2,3);
    5. arr.sort();
    6. arr.push(123);
    7. arr.length;
    二、创建对象的两种方法
     *     1、{}            字面量创建对象
    1. var person={
    2. name:'老王',
    3. age:30,
    4. sing:function(){
    5. console.log('五环之歌');
    6. }
    7. };
    8. person.height='180CM';
    9. person.play=function(){
    10. console.log('打飞机');
    11. };
    12. console.log(person);
                 *     2、new Object()    
                 * 
                 * 创建完的对象有两个特点
                 *     1、添加属性
                 *         描述对象的特征
                 *         属性的值为非函数的任意数据类型
                 *     2、添加方法
                 *         实现对象的一些功能
                 *         方法的值为函数
    1. //第二种创建对象的方法
    2. var person2=new Object();
    3. person2.name='小王';
    4. person2.age=18;
    5. person2.play=function(){
    6. console.log('打小飞机');
    7. };
    8. console.log(person2)
     三、封装函数创建对象 
          
    1. //工厂方式
    2. function createPerson(name,age){
    3. var obj=new Object; //创建对象。
    4. obj.name=name;
    5. obj.age=age;
    6. obj.say=function(){
    7. console.log('我叫'+obj.name);
    8. }
    9. return obj; //将对象返回出去
    10. }
    11. var p1=createPerson('老王',30);
    12. var p2=createPerson('小王',18);
    13. p1.say();
    14. p2.say();
    15. //面向对象方式
    16. function CreatePerson(name,age){
    17. //var obj=new Object(); //创建对象。 //因为使用new调用的,会自动创建一个空对象,所以这里不需要自己创建空对象了。
    18. this.name=name; //并且会自动把内部的this指向自动创建的对象
    19. this.age=age;
    20. this.say=function(){
    21. console.log('我叫'+this.name+'今年'+this.age);
    22. }
    23. //return obj; //将对象返回出去 //以上写的内容会被放进自动创建的空对象内,并且被return出去
    24. }
    25. var p1=new CreatePerson('老王',30);
    26. var p2=new CreatePerson('小王',18);
    27. p1.say();
    28. p2.say();

    四、关于new
                 * new
                 *     一元运算符,后面只能跟函数,用来调用函数
                 * 调用函数的方式
                 *     1、new 函数名
                 *         没有参数的情况下用这种方式
                 *     2、new 函数名()
    1. function fn(a){
    2. if(a){
    3. console.log(1,a);
    4. }else{
    5. console.log(1);
    6. }
    7. }
    8. fn(); //以前调用函数的方法
    9. new fn; //用new调用函数,不带参数
    10. new fn(2); //用new调用函数,带参数
                 * 用new调用函数的执行过程
                 *     1、自动创建一个空对象
                 *     2、把函数内部的this指向创建的这个对象
                 *     3、在函数执行完成以后自动返回创建的那个对象,即使函数里面没有return
                 *         函数里有return
                 *             1、return的是对象
                 *                 返回这个对象
                 *             2、return的是非对象
                 *                 返回自动创建的那个对象

                 * 注意:
                 *         1、用new调用的函数,得到的永远是一个对象,不管函数有没有返回值
                 *         2、使用new调用函数,这个函数就是一个用来创建对象的函数(构造函数)
    1. function fn2(){
    2. console.log(this);
    3. }
    4. fn2(); //Window
    5. new fn2; //{} this指向是创建的那个对象
    6. var re1=fn2();
    7. var re2=new fn2;
    8. console.log('re1',re1); //undefined
    9. console.log('re2',re2); //{} 返回了创建的对象
    10. function fn3(){
    11. //return [1,2,3]; return的是对象,
    12. return 1; //return的是非对象
    13. }
    14. var re3=fn3();
    15. var re4=new fn3;
    16. console.log('re3',re3); //[1, 2, 3] //1
    17. console.log('re4',re4); //[1, 2, 3] //{}
    五、构造函数
                 *     创建并初始化对象的函数,并且需要用new来调用函数,不用new调用的话与普通的函数就没有区别
                 *     首字母应该大写
                 * Date()        new Date()
                 * Array()        new Array()
                 * 
                 * 通过构造函数new出来的对象叫实例,创造对象的过程叫实例化
                 * 
                 * 
                 * 构造函数的问题
    *     性能问题会造成资源浪费 ---解决方法用原型
    1. function Person(name,age){
    2. /*
    3. * 1、创建一个空对象
    4. * var obj=new Object;
    5. * 2、把this指向创建的对象
    6. * this=obj
    7. */
    8. this.name=name;
    9. this.age=age;
    10. this.say=function(){
    11. console.log('我叫'+this.name);
    12. };
    13. /*
    14. * 3、函数执行完毕后,返回创建的对象
    15. * return obj;
    16. */
    17. }
    18. var p1=new Person('老王',30); //一个实例
    19. var p2=new Person('小王',18); //一个实例
    20. console.log(p1.say==p2.say); //false 公用的方法变成了每一个对象特有的,这样就会造成资源浪费,解决方法---原型
    21. var arr1=new Array(1,2,3);
    22. var arr2=new Array(4,5,6);
    23. console.log(arr1.push===arr2.push); //true
    六、原型-prototype
                 * 原型    prototype
                 *     写法
                 *         构造函数名.prototype.xxx=???  写在构造函数外面
                 *     概念
                 *         函数身上的属性,每一个函数身上都有这个属性,它的值是一个对象
                 *     用途
                 *         它身上可以放属性与方法,如果与构造函数相结合的话,通过构造函数创建的对象就会具有它身上的属性与方法
                 *         对象是通过构造函数创建的,那prototype就是这个对象的原型对象
                 *         建议把一些公用的属性或者方法都放到构造函数的原型身上(这样就可以减少资源浪费)
    1. function Person(name,age){
    2. this.name=name;
    3. this.age=age;
    4. }
    5. Person.prototype.sex='男';
    6. Person.prototype.say=function(){
    7. console.log('我叫'+this.name);
    8. };
    9. var p1=new Person('老王',30); //一个实例
    10. var p2=new Person('小王',18); //一个实例
    11. p1.say();
    12. p2.say();
    13. console.log(p1.say===p2.say); //true
    七、__proto__
                 * __proto__
                 *     对象身上的属性,每一个对象身上都会有这个属性。它的值也是一个对象,它的值就是它对应的构造函数的prototype的值
                 *     对象.__proto__===构造函数.prototype
                 *     作用:能够查看构造函数的原型
                 *     对象之所以能够继承原型身上的属性与方法,是因为每个对象身上都有一个__proto__,那__proto__的值指向了构造函数的prototype
    1. function Person(name,age){
    2. this.name=name;
    3. this.age=age;
    4. }
    5. Person.prototype.sex='男';
    6. Person.prototype.say=function(){
    7. console.log('我叫'+this.name);
    8. };
    9. var p1=new Person('老王',30); //一个实例
    10. var p2=new Person('小王',18); //一个实例
    11. console.log(p1.__proto__===Person.prototype) //true
    12. console.log(p1.prototype) //undefined
    13. console.log(p1.__proto__);
     八、原型链
                 * 原型链
                 *     对象与原型之间的关系(链接)
                 * 
                 * 原型链查找规则
                 *     当我们调用一个对象身上的属性或者方法的时候,它就会有一个查找规则
                 *         1、首先会在自己身上去找,如果有的话就用自己的
                 *         2、如果没有的话,它就在该对象的__proto__下查找,因为__proto__这个属性是指向对应的构造函数身上的protytpe,把它查找的时候找的就是构造函数的原型
                 *         3、如果原型身上也没有的话,那它会继续往外面找,直到找到最顶层的Object身上的prototype
    1. function Person(){
    2. this.name='kaivon';
    3. this.age=20;
    4. }
    5. Person.prototype.age=18;
    6. Object.prototype.age=22;
    7. var p1=new Person();
    8. console.log(p1.age); //20 18 22
    九、面向对象的写法
     
                /*function 构造函数(){        //构造函数
                    this.属性=??;
                }
                构造函数.prototype.方法1=function(){
                                                var This=this;       //this代表的就是这个构造函数new的时候自动创建的对象
                                                setInterval(function(){
                                                            this.方法2();    
                                                   },2000)
                               }     //原型
                构造函数.prototype.方法2=function(){}
                var 实例对象=new 构造函数();     //实例
                实例对象.方法();*/

                 * 写面向对象的原则
                 *     1、所有的变量都做属性
                 *         属性需要写在构造函数里
                 *     2、所有的函数都要做为方法
                 *         方法添加到构造函数的原型
                 *     3、this指向,在事件或者定时器里是访问不到真正的this,需要在外面存一下this





  • 相关阅读:
    【兼容性】IE不支持日期字符串转换为日期对象
    tinydate.js[v0.2] 优化了调用方式
    tinydate.js[v0.1]关于Javascript Date的工具
    【兼容性】IE10不支持参数默认值即可选参数
    【兼容性】IE10不支持lamda表达式
    创建第一个core项目(netCore学习笔记1)
    .net(C#)在Access数据库中执行sql脚本
    (Lesson2)根据类名称和属性获得元素-JavaScript面向对象
    UWP Tiles
    UWP Ad
  • 原文地址:https://www.cnblogs.com/CafeMing/p/6616629.html
Copyright © 2011-2022 走看看