Home > Developer > JavaScript
Create a label
Object-oriented organizational structure// 传统var=document.createElement(‘p‘);var=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"> varYbixian= { //Get elements Getelem: { Tag: function(tag){ }, ID: function(ID){ } }, //Set style related CSS: { Addstyle: function(){ }, Removestyle: function(){ }, AddClass: function(){}, Removeclass: function(){}, Toggleclass: function(){} } }; </script>> <Body> <Div>I am a div</div></body> <Script type="Text/javascript"> Ybixian.Tag(' div ')[0].style.Border = "1px solid Red"; </script>>//Describe a person's constructor function Person(PName,PAge,Psex){ //constructor does not require return //Add members to the object use this. member name = value; Here this refers to the caller, This.name =PName; This. Age =PAge; This.Sex =Psex; This.Handler = function(){ Console.Log(' Hello, my name: '+ This.name+', this year: '+ This. Age+' old, ')} } varP= New Person(' Tom ', -, ' Woman '); P.Handler(); //Hello, my name is: Tom, this year: 20 years old, varP2= New Person(' Tim ', -, ' man '); P2.Handler(); //Hello, my name is: Tim, this year: 27 years old, Constructor propertyfunctionFn(){}var=newFn();// __proto__ 与 prototype 有什么区别?// __proto__ 是站在对象的角度讨论其原型对象 (fn1) // prototype 是站在构造函数的角度讨论原型属性, 或构造函数创建的对象的原型对象 ( Fn )
Inherited// 每一个对象都可以访问到一个属性// 其中有一个是 constructor (构造器)// 每一个对象的 constructor 属性描述的是其构造函数functionFn(){}var=newFn();console.log(o.construtor=== Fn);// true // 每一个对象都链接到 其 原型对象上 // 对象的 constructor 属性是其原型对象提供的
Combining inheritance
//Combined inheritance//Combined inheritance add members of other objects to themselvesvarO1= {name: ' Jim ', Age: -,Gender: ' man '};varO2= { like: ' play basketball '};//Let O2 inherit from O1//Add members of O1 to O2 for(varKinchO1){O2[K]=O1[K]}//Because the objects in the for-in loop can be arbitrarily substituted, O2 can inherit from arbitrary objects///Therefore, this inheritance method is called combined inheritance//Here you want O2 to inherit from any object. So in order to simplify the inherited code//Provide a method for O2, called ExtendO2.Extend = function(obj){ for(varKinchOBJ){ ThisK=obj[K]; } }O2.Extend(O1); //InheritanceO2.Extend({ ID: function(ID){ }, Tag: function(tag){ }, Showerr: function(msg){ Throw New Error(msg); }});//Prototype inheritance//If you need to have an object have a certain behavior (property, method), then consider adding this behavior to the prototype object, then this object inherits from the prototype object, obtains the behavior//What is prototype inheritance//object inherits from its prototype object//The so-called prototype inheritance is to add something to the object's prototype object//How to use a prototype object///1, adding members using the object's dynamic properties/*var o = {};o.name = ' Jim ';var person = function () {};Person.prototype.sayHello = function () {alert (' hahaha ');};*///When the prototype object is an object, you can add members at any time using dynamic properties//Added members are inherited by objects created by the constructor function//2, using the overlay prototype object//var person = function () {};//Person.prototype.sayHello = function () {//alert (' Ha ha ');// };//person.prototype.saygoodbye= function () {};//Person.prototype.sayLove = function () {};// ...//If you need to add a lot of contentvarPerson= function(){}; Person.prototype = { Constructor:Person, SayHello: function(){}, Saygoodbye: function(){}, Saylove: function(){}};varCreate= function(obj){ if(Object.Create){ return Object.Create(obj); } Else { function F(){} F.prototype =Obj; return New F(); }} varObj= {name:' YBX ', Age: -}; varO= Create(obj);Console.Log(o); //{__proto__{age:27,name: "Ybx"}}JavaScript Object-oriented learning (I.)
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
