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面向对象学习笔记
JavaScript 常被描述为一种基于原型的语言 (prototype-based language)--每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型, ...
- javascript 面向对象学习（一）——构造函数
最近在学习设计模式,找了很多资料也没有看懂,看到怀疑智商,怀疑人生,思来想去还是把锅甩到基础不够扎实上.虽然原型继承.闭包.构造函数也都有学习过,但理解得不够透彻,影响到后续提高.这次重新开始学习,一 ...
- javascript 面向对象学习（三）——this，bind、apply 和 call
this 是 js 里绕不开的话题,也是非常容易混淆的概念,今天试着把它理一理. this 在非严格模式下,总是指向一个对象,在严格模式下可以是任意值,本文仅考虑非严格模式.记住它总是指向一个对象对于 ...
- javascript 面向对象学习（二）——原型与继承
什么是原型? 首先我们创建一个简单的空对象,再把它打印出来 var example = {} console.log(example) 结果如下: { __proto__: { constructor ...
- javascript面向对象学习笔记——创建对象（转）
工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o ...
- javascript面向对象学习
1.this指向问题,指向的是当前的方法属于谁,当前的方法属于谁就指向谁!! 例子: oDiv.onclick = function () { this指向的是oDiv,因为这个方法属于oDiv } ...
- JavaScript之面向对象学习七(动态原型模式、寄生构造函数模式、稳妥构造函数模式创建自定义类型)
一.动态原型模式 在面向对象学习六中的随笔中,了解到组合构造函数模式和原型模式创建的自定义类型可能最完善的!但是人无完人,代码亦是如此! 有其他oo语言经验的开发人员在看到独立的构造函数和原型时,很可 ...
- JavaScript学习笔记(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- JavaScript学习总结(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
随机推荐
- Cocos2d-X多线程(4) 在子线程中进行网络请求
新版本的android系统已经不允许在UI线程中进行网络请求了,必须新建一个线程. 代码实操: 头文件: #ifndef __TestThreadHttp_SCENE_H__ #define __Te ...
- java.sql.SQLSyntaxErrorException: ORA-00923: 未找到要求的 FROM 关键字
ssm(Oracle)配置druid数据库连接池,正常启动项目,但是请求访问数据库时报错 “java.sql.SQLSyntaxErrorException: ORA-00923: 未找到要求的 FR ...
- 【机器学习入门笔记】第 2 课：SVM
Support Vector machines 为什么人们称一种算法为机器,我也不知道(俄罗斯人发明) 粗略的来说,支持向量机所做的就是去寻找分割线(separating) 或者通常称之为超平面,介于 ...
- Libra的思考
这几年关注了很多的新技术,近期让我觉得值得一讲的是blockchain,刚巧6.18号就发布了Libra 他是这么介绍自己的 libra https://developers.libra.org/bl ...
- "fatal error LNK1169: 找到一个或多个多重定义的符号" 解决方案
本人在测试刚刚安装的vs2017时运行出了问题, 错误信息为 "fatal error LNK1169: 找到一个或多个多重定义的符号", 代码如下: //Myfile.h #in ...
- 【VS开发】Caffelib中出现的问题：强制链接静态库所有符号(包括未被使用的)
C++程序在链接一个静态库时,如果该静态库里的某些方法没有任何地方调用到,最终这些没有被调用到的方法或变量将会被丢弃掉,不会被链接到目标程序中.这样做大大减小生成二进制文件的体积.但是,某些时候,即使 ...
- 【Qt开发】在QLabel已经显示背景图片后绘制图形注意事项
主要是要解决图形覆盖的问题,通常的办法就是对QLabel进行子类化,并重载函数: void myLabel::paintEvent(QPaintEvent *event) { QLab ...
- k8s-kubernetes-configmap存储
存储 configMap configMap描述信息 ConfigMap功能在Kubernetes1.2版本中引入,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息. ConfigMap ...
- show slave status 命令判断MySQL复制同步状态
1. show slave status命令可以显示主从同步的状态 MySQL> show slave status \G; *************************** 1. row ...
- oracle ojdbc 版本须对应，否则日期字段查询结果与实际值可能不一致
1. 数据库版本:select * from v$version; 2. 版本对应: