1. js的几种数据类型：
number, string, boolean, object, undefined五种数据类型
2. js的常见内置对象类：
Date, Array, Math,Number,Boolean, String, RegExp, Function,Object。
3. js的两个类型判断方法：
typeof、instanceof
4.什么是面向对象和面向对象的特性：
面向对象可以把程序中的关键模块都视为对象，而模块拥有属性及方法。
工厂模式：就是在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可。
构造函数模式：ECMAscript中构造函数可以创建特定类型的对象，类似于Array、Date等原生JS的对象。
原型模式：就是可以让所有对象实例共享它所包含的属性及方法。
特性：
抽象：抓住核心问题，把客观事物封装成抽象的类
封装：不考虑内部实现，只考虑功能使用
继承：从已有对象上，继承出新的对象，让某个类型的对象获得另一个类型的对象属性的方法。
抽象：
<script>
var a=12;
alert(a);
var arr=[1,2,3,4,5,6];
arr.a=12;
alert(arr.a);
</script>
<script>
function aaa() //函数：自由
{
alert('abc');
}
var arr=[1,2,3,4];
arr.aaa=function () //方法：属于一个对象
{
alert('abc');
};
aaa();
arr.aaa();
</script>
继承实例：
<script type="text/javascript">
window.onload=function(){
var a={
name:'张三'
}
var b=clone(a)
b.name='李四';
function clone(obj){
var f=function(){};
f.prototype=obj
return new f();
}
alert(b.name);
}
</script>
5.object构造函数、
<script type="text/javascript">
window.onload=function(){
function Creatshouw(nam,se){
var obj=new Object();
obj.name=nam;
obj.sex=se;
obj.showname=function(){
alert(obj.name);
}
obj.showsex=function(){
alert(obj.showsex);
}
return obj;
}
var obj1=Creatshouw('张三','男')
alert(obj1.sex)
}
</script>
6.包装对象
<script type="text/javascript">
var str='hello';
var str2=new String('hello');
var srr='hello';
String.prototype.lasevalue=function(){
return this[this.length-1];
}
srr.num=10;
alert(srr.num);
</script>
7.继承的拖拽，利用继承类的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function aa(){
this.name=[1,2,3];
}
aa.prototype.showname=function(){
alert(this.name);
}
function bb(){
aa.call(this);
}
var f=function(){};
f.prototype=aa.prototype;
bb.prototype=new f();
bb.prototype.constructor=bb;
var b1=new bb();
b1.name.push(4,5,6);
alert(b1.constructor);
var b2=new bb();
</script>
</head>
<body>
</body>
</html>
8.面向对象组件的开发：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#div2 {
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 100px;
}
#div3 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 200px;
}
#div4 {
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 300px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var d1 = new Drag();
d1.init({
id: 'div1'
});
var d2 = new Drag();
d2.init({
id: 'div2',
todown: function() {
document.title = 'hello';
}
});
var d3 = new Drag();
d3.init({
id: 'div3',
todown: function() {
document.title = '面向';
},
toup: function() {
document.title = '对象';
}
});
var d4 = new Drag();
d4.init({
id: 'div4',
toup: function() {
document.title = 'ok';
}
});
}
function Drag() {
this.obj = null;
this.disx = 0;
this.disy = 0;
}
Drag.prototype.init = function(opt) {
var _this = this;
this.obj = document.getElementById(opt.id);
this.setting={
todown:function(){},
toup:function(){}
}
extend(this.setting,opt);
this.obj.onmousedown = function(ev) {
var ev = ev || event;
_this.fndown(ev);
_this.setting.todown();
document.onmousemove = function(ev) {
var ev = ev || event;
_this.fnmove(ev);
}
document.onmouseup = function() {
_this.fnup();
_this.setting.toup();
}
}
}
Drag.prototype.fndown = function(ev) {
this.disx = ev.clientX - this.obj.offsetLeft;
this.disy = ev.clientY - this.obj.offsetTop;
}
Drag.prototype.fnmove = function(ev) {
this.obj.style.left = ev.clientX - this.disx + 'px';
this.obj.style.top = ev.clientY - this.disy + 'px';
}
Drag.prototype.fnup = function() {
document.onmousemove = document.onmouseup = null;
}
function extend(obj1,obj2){
for(var i in obj2){
obj1[i]=obj2[i];
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
