首頁 > 開發者 > JavaScript
標籤：move 個人 removes this add 函數 div like 傳統
面向對向的初體驗建立一個標籤
// 傳統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歲了, function Fn(){}var fn1 = new Fn();// __proto__ 與 prototype 有什麼區別?// __proto__ 是站在對象的角度討論其原型對象 (fn1) // prototype 是站在建構函式的角度討論原型屬性, 或建構函式建立的對象的原型對象 ( Fn )// 每一個對象都可以訪問到一個屬性// 其中有一個是 constructor (構造器)// 每一個對象的 constructor 屬性描述的是其建構函式function Fn(){}var o = new Fn();console.log(o.construtor === Fn); // true // 每一個對象都連結到 其 原型對象上 // 對象的 constructor 屬性是其原型對象提供的組合繼承
// 組合式繼承// 組合式繼承將其他的對象中的成員加到自己身上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"}}javascript物件導向學習(一)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
