javascript面向对象学习

Posted 追逐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript面向对象学习相关的知识,希望对你有一定的参考价值。

面向对向的初体验

创建一个标签

// 传统
var p = document.createElement(‘p‘);
var txt = document.createTextNode(‘我是传统js创建的文字‘);
p.appendChild(txt);
document.body.appendChild(p);

// 面向对象 (jquery方式)

$(‘<p>我是jquery创建的标签</p>‘).appendTo(‘body‘);

面向对象的组织结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            
            var ybixian = {
                
                // 获得元素
                getElem: {
                    tag: function (tag) {
                        
                    },
                    id: function (id) {
                        
                    }
                },
                // 设置样式相关
                css: {
                    addStyle: function () {
                        
                    },
                    removeStyle: function() {
                        
                    },
                    addClass: function () {},
                    removeClass: function() {},
                    toggleClass: function() {}
                }
                
            };
            
        </script>
    </head>
    <body>
    
        <div>我是一个div</div>

    </body>
    
    <script type="text/javascript">
        ybixian.tag( ‘div‘ )[ 0 ].style.border = "1px solid red";
    </script>
</html>

构造函数

// 描述一个人的构造函数

    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 提供一个方法, 叫 extend
o2.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"}}

以上是关于javascript面向对象学习的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript学习总结——this原型链javascript面向对象

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

JavaScript之面向对象

JavaScript-05-笔记

PHP面向对象之选择工厂和更新工厂