面向对向的初体验

创建一个标签

// 传统var p = document.createElement('p');var txt = document.createTextNode('我是传统js创建的文字');p.appendChild(txt);document.body.appendChild(p);// 面向对象 (jquery方式)$('
我是jquery创建的标签
').appendTo('body');

面向对象的组织结构

            
                                        
    
     我是一个div
    
            

构造函数

// 描述一个人的构造函数    function Person(pName, pAge, pSex) {        // 构造函数中不需要 return         // 为对象添加成员使用 this.成员名 = 值; 这里的this指的是调用者,        this.name = pName;        this.age = pAge;        this.sex = pSex;        this.handler = function () {            console.log('大家好,我叫:'+this.name+',今年: '+this.age+'岁了,')        }    }    var p = new Person('tom', 20, '女');    p.handler(); //大家好,我叫:tom,今年: 20岁了,    var p2 = new Person('tim', 27, '男');    p2.handler(); // 大家好,我叫:tim,今年: 27岁了,

原型对象与原型属性

• 凡是函数就有属性 prototype
• 由某一个函数 new 出来的对象，会自动链接到 该函数的 prototype
• 凡是通过 new 出来的对象就有 _ _ proto_ _ (非标准)

function Fn(){}var fn1 = new Fn();// __proto__ 与 prototype 有什么区别?// __proto__ 是站在对象的角度讨论其原型对象 (fn1) // prototype 是站在构造函数的角度讨论原型属性, 或构造函数创建的对象的原型对象 ( Fn )

constructor属性

// 每一个对象都可以访问到一个属性// 其中有一个是 constructor (构造器)// 每一个对象的 constructor 属性描述的是其构造函数function Fn(){}var o = new Fn();console.log(o.construtor === Fn); // true // 每一个对象都链接到 其 原型对象上 // 对象的 constructor 属性是其原型对象提供的

继承

• 在js中有两种继承模型
  • 原型继承
  • 组合继承

组合继承

//  组合式继承// 组合式继承将其他的对象中的成员加到自己身上var o1 = {name: 'jim',age: 18,gender: '男'};var o2 = {like: '打篮球'};// 让o2 继承自 o1 // 将 o1 的成员加到 o2 上for(var k in o1){    o2[k] = o1[k]}// 由于 for in 循环中的对象可以随意的替代, 因此 o2 可以继承自任意的对象// 因此, 这个继承方法称为组合式继承// 这里希望 o2 可以继承自任意的对象. 所以为了简化继承的代码// 给 o2 提供一个方法, 叫 extendo2.extend = function ( obj ) {    for ( var k in obj ) {        this[ k ] = obj[ k ];    }   }o2.extend( o1 );  // 继承o2.extend({    id: function( id ) {            },    tag: function ( tag ) {            },    showErr: function (msg) {        throw new Error( msg );    }});

原型继承

// 原型继承 // 如果需要让一个对象有某一个行为（属性，方法）,那么可以考虑将这个行为加到原型对象中，那么这个对象就继承自原型对象，获得该行为// 什么是原型式继承// 对象继承自其原型对象// 所谓的原型式继承就是在 对象的 原型对象中加东西即可// 如何使用原型对象// 1, 利用对象的动态特性添加成员/*var o = {};o.name = 'jim';var Person = function () {};Person.prototype.sayHello = function () {    alert (' 哈哈哈 ');};*/// 此时 原型对象是对象, 可以利用动态特性随时添加成员// 添加的成员都会被 构造函数创建的对象所继承// 2, 利用覆盖原型对象//  var Person = function () {};//  Person.prototype.sayHello = function () {//      alert (' 哈哈哈 ');//  };//  Person.prototype.sayGoodbye= function () {};//  Person.prototype.sayLove = function () {};// ...// 如果需要添加的内容非常多var Person = function () {};Person.prototype = {    constructor: Person,    sayHello: function() {},    sayGoodbye: function() {},    sayLove: function () {}};

经典继承

var create = function( obj ) {    if ( Object.create ) {        return Object.create( obj );    } else {                function F() {}        F.prototype = obj;        return new F();    }}            var obj = {name:'ybx',age:27};          var o = create ( obj );console.log(o); // {__proto__{age:27,name:"ybx"}}