JavaScript面向对象 -- 笔记 - 图2review0604

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaScript面向对象</title>
  6. </head>
  7. <body>
  9. </body>
  10. <script type="text/javascript">
  11.     // JavaScript对象声明的六种方式
  12.     // 一、字面量声明
  13.     // 通过obj.属性名或obj.方法名()就可以读取或调用对象的属性/方法了
  14.     var obj = {
  15.         name1 : value1,
  16.         name2 : value2,
  17.         name3 : value3,
  18.         fn1 : function(){},
  19.         fn2 : function(){}
  20.     }
  21.     // 二、用new操作符构造Object对象
  22.     // 首先用new Object()创建一个空对象，然后用多条语句给对象添加属性/方法。
  23.     var obj = new Object();
  24.     obj.name1 = value1;
  25.     obj.name2 = value2;
  26.     obj.name3 = value3;
  27.     obj.fn1 = function(){};
  28.     obj.fn2 = function(){};
  29.     // 三、用函数声明的方式构造对象
  30.     // 通过这种方式声明的对象，每一次new出来的对象都是独立的，互相不会有影响，属性、方法中的this指向的就是新创建的、调用他们的对象。
  31.     function person(name,age){
  32.         this.name = name;
  33.         this.age = age;
  34.         this.say = function(){
  35.             console.log('My name is' + this.name + ', I\'m' + this.age + 'years old');
  36.         }
  37.     }
  38.     var xiaoMing = new person('xiaoMing',16);
  39.     xiaoMing.say();//"My name is xiaoming, I'm 16 years old"
  40.     // 四、工厂模式声明对象
  41.     // 每一次调用function 声明的函数时，它在内部new Object()，最后将这个新建的对象return回来，调用时就像普通函数调用一样，实例化的时候不用再new了（内部new过）。虽然多次调用该函数走的都是一样的流程，但是生产出来的两个产品互不影响。
  42.     function person(name,age){
  43.         var obj = new Object();
  44.         obj.name = name;
  45.         obj.age = age;
  46.         obj.say = function(){
  47.         console.log('My name is' + obj.name + ', I\'m' + obj.age + 'years old');
  48.         };
  49.         return obj;
  50.     }
  51.     var xiaoMing = person('xiaoMing',16);
  52.     xiaoMing.say();//"My name is xiaoming, I'm 16 years old"
  53.     var xiaoHong = person('xiaoHong',18);
  54.     xiaoHong.say();//"My name is xiaoming, I'm 18 years old"
  55.     // 五、原型方式声明对象
  56.     // 原型方式是将该对象的属性/方法写在他的prototype属性所指的对象上。
  57.     // 这有点像JS上常说的事件代理/委托。事件不直接绑定在该DOM元素上，而是绑定在它的父级元素，当给该DOM元素添加兄弟元素时，兄弟元素因为冒泡，能触发相同的事件。
  58.     function person() {/*空*/};
  59.     person.prototype.height = "1.80m";
  60.     person.prototype.grade = "Senior 3";
  61.     person.prototype.say = function() {
  62.         console.log( 'I\'m ' + this.height + ' tall and I\'m in '+ this.grade);
  63.     }
  64.     var xiaoMing = new person();
  65.     xiaoMing.say(); //"I'm 1.80m tall and I'm in Senior 3"
  66.     // 六、混合模式
  67.     // 混合模式可以理解成原型模式+构造函数
  68.     // 对比混合模式和原型模式可以发现，混合模式函数体不是空的，而函数体内的内容就是前边说的构造方式。
  69.     function person(name, height) {
  70.         this.name = name;
  71.         this.height = height;
  72.     };
  73.     person.prototype.age = 18;
  74.     person.prototype.grade = "Senior 3";
  75.     person.prototype.say = function() {
  76.         console.log('Hello, my name is ' + this.name + '. I\'m ' + this.age + ' years old, ' + this.height + ' tall and I\'m in '+ this.grade + '.');
  77.     }
  78.     var xiaoMing = new person('Xiaoming', '1.80m');
  79.     xiaoMing.say();//"Hello, my name is Xiaoming. I'm 18 years old, 1.80m tall and I'm in Senior 3."
  80.     var xiaoHong = new person('Xiaohong', '1.65m');
  81.     xiaoHong.say();//"Hello, my name is Xiaohong. I'm 18 years old, 1.65m tall and I'm in Senior 3."
  83.     // 闭包
  84.     // 闭包是一个拥有很多变量和绑定了这些变量的环境的表达式（通常就是一个函数）
  85.     function a(){
  86.         var i= 0;
  87.         function b(){
  88.             alert(++i);
  89.         }
  90.         return b;
  91.     }
  92.     var c = a();
  93.     c();//特点：函数b实在a内嵌套的，函数a需要返回函数b
  94.     //用途：1、读取函数内部变量   2、让i变量得值保存在内存中
  95.     function f1(){
  96.         var n = 99;
  97.         nAdd = function (){
  98.             n=n+1;
  99.         }
  100.         function f2(){
  101.             alert(n);
  102.         }
  103.         return f2;
  104.     }
  105.     var rs = f1();
  106.     rs();//99
  107.     nAdd();
  108.     rs();//100  --  rs就是f2函数的闭包函数
  109. </script>
  110. </html>

review0605

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>review0605</title>
  6. </head>
  7. <body>
  9. </body>
  10. <script type="text/javascript">
  11.     // 封装
  12.     function A(){
  13.         function _xx(){
  14.             alert(111);
  15.         }
  16.         this.xx = function(){
  17.             return _xx;
  18.         }
  19.     }
  21.     A.prototype = {
  22.         oth:function(){
  23.             alert(222);
  24.         }
  25.     }
  27.     var a = new A();
  28.     alert(a.xx()());
  29.     a.oth();
  32.     // 继承 案例一
  33.     var person = function(){
  34.         person.prototype.say = function(){
  35.             alert(333);
  36.         }
  37.     }
  38.     person.prototype.salary = 500;
  40.     var programmer = function(){}
  41.     programmer.prototype = new person();
  42.     programmer.prototype.wcd = function(){
  43.         alert(444);
  44.     }
  45.     programmer.prototype.salary = 1000;
  47.     var p = new programmer();
  48.     p.say();//可以调用
  49.     p.wcd();//可以调用
  52.     // 继承 案例二
  53.     function person(name,age){
  54.         this.name = name;
  55.         this.age = age;
  56.     }
  58.     person.prototype.sayHello = function(){
  59.         alert('属性值name：' + this.name);
  60.     }
  62.     function student(){};
  63.     student.prototype = new person('lisi',18);
  64.     student.prototype.grade = 3;
  65.     student.prototype.test = function(){
  66.         alert(this.grade);
  67.     }
  69.     var s = new student();
  70.     s.sayHello();
  71.     alert(s.grade);
  74.     // 构造继承
  75.     function parents(name){
  76.         this.name = name;
  77.         this.say = function(){
  78.             alert('父亲的名字：' + this.name);
  79.         }
  80.     }
  82.     function child(name,age){
  83.         // 继承parent
  84.         this.pObj = parents;
  85.         // 子对象的参数name传递到父对象中 
  86.         // 用父对象来创建子对象
  87.         this.pObj(name);
  88.         // parents(name)
  89.         this.age = age;
  90.         this.sayC = function(){
  91.             alert('child:' + this.name + ' ' + 'age:' + this.age);
  92.         }
  93.     }
  95.     var p = new parents('zhangsan');
  96.     p.say();
  97.     var c = new child('lisi',20);
  98.     c.sayC();
  101.     // call apply
  102.     function parents(name,age,len){
  103.         this.name = name;
  104.         this.age = age;
  105.         this.len = len;
  106.         this.say = function(){
  107.             alert(this.name + this.age + this.len);
  108.         }
  109.     }
  110.     //call继承
  111.     function student(name,age){
  112.         parents.call(this,name,age);
  113.     }
  114.     //apply继承
  115.     function teacher(name,age,len){
  116.         parents.apply(this,[name,age,len]);
  117.     }
  118.     //实例化
  119.     var per = new parents('zhangsan',25,180);
  120.     per.say();
  121.     var stu = new student('lisi',20);
  122.     stu.say();
  123.     var tea = new teacher('wangwu',28,178);
  124.     tea.say();
  127.     // 多继承
  128.     function fun1(){
  129.         fun2.call(this);
  130.         fun3.apply(this,['play','aa']);
  131.     }
  133.     function fun2(){
  134.         this.name = 'zhangsan';
  135.         this.eat = function(){
  136.             alert('eating');
  137.         }
  138.     }
  140.     function fun3(paly,name){
  141.         this.paly = play;
  142.         this.name = name;
  143.     }
  145.     var car = new fun1();
  146.     alert(car.name);
  147.     alert(car.play);
  148.     car.eat();
  151.     // 对象冒充
  152.     function person(name,age){
  153.         this.name = name;
  154.         this.age = age;
  155.         this.sayHi = function(){
  156.             alert('Hello world!');
  157.         }
  158.     }
  160.     person.prototype.walk = function(){
  161.         alert('walk around');
  162.     }
  164.     function student(name,age,grade){
  165.         this.newObj = person;
  166.         // 冒充person对象 传递特权属性和特权方法给子类
  167.         this.newObj(name,age);
  168.         this.grade = grade;
  169.     }
  171.     var stu1 = new student('zhangsan',15,5);
  172.     alert(stu1.grade);
  173.     alert(stu1.age);
  174.     alert(stu1.name);
  175.     alert(stu1.sayHi);
  176.     stu1.walk();//调用共有方法是报错的
  177.     // 注意：stu1 继承了person的特权属性和特权方法，但是没有继承共有属性和共有方法
  178. </script>
  179. </html>