1. js的几种数据类型：
number, string, boolean, object, undefined五种数据类型2. js的常见内置对象类：
Date, Array, Math,Number,Boolean, String, RegExp, Function,Object。3. js的两个类型判断方法：
typeof、instanceof4.什么是面向对象和面向对象的特性：
面向对象可以把程序中的关键模块都视为对象，而模块拥有属性及方法。
工厂模式：就是在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可。
构造函数模式：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;
}
// Creatshouw:类，obj1：对象
var obj1=Creatshouw('张三','男')
alert(obj1.sex)
}
</script>6.包装对象
<script type="text/javascript">
var str='hello';
//alert(str.charAt(0));//找到下标为0的字符串片段
//alert(str.indexOf('e'));//找到e第一次出现的下标
//alert(typeof str);
//null undefined Number Boolean String
//包装对象：基本类型都有自己的包装对象：Number Boolean String
var str2=new String('hello');
//基本类型会自动找到对应的包装对象类型，然后包装对象把所有的属性和方法给基本类型，然后包装对象就消失
var srr='hello';
String.prototype.lasevalue=function(){ //给字符串的包装对象添加一个方法
return this[this.length-1];
}
//alert(srr.lasevalue());
srr.num=10;
alert(srr.num);//undefined :
</script>7.继承的拖拽，利用继承类的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//类：js是没有类的概念的，我们通常把构造函数当做类来用
//类式继承：虽然简单，但是有很多坑，所以用的时候最好还是属性和方法分开继承。
//属性：用call方式
//方法：借助中间构造函数f实现继承
function aa(){//父类
this.name=[1,2,3];
}
aa.prototype.showname=function(){
alert(this.name);
}
function bb(){ //子类
aa.call(this);
}
//var a1=new aa();
// bb.prototype=new aa();//用什么方法能够实现一句话进行对象的拷贝：类式继承
var f=function(){};
f.prototype=aa.prototype;
bb.prototype=new f();
bb.prototype.constructor=bb;//修正构造函数指向
var b1=new bb();
//alert(b1.name);
//b1.showname();
b1.name.push(4,5,6);
//alert(b1.name);//123456
alert(b1.constructor);
var b2=new bb();
//alert(b2.name); //123456:证明这种方式是引用，会相互影响
</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'
});
//第二个盒子：按下的时候title变成hello
var d2 = new Drag();
d2.init({ //配置参数
id: 'div2',
todown: function() {
document.title = 'hello';
}
});
//第三个盒子：按下title变成：面向，up的时候title：对象
var d3 = new Drag();
d3.init({ //配置参数
id: 'div3',
todown: function() {
document.title = '面向';
},
toup: function() {
document.title = '对象';
}
});
//第四个盒子：up的时候title变成：ok
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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
