2019-06-13
单体创建对象
var Tom = {
// 属性
name:'tom',
age:18,
// 方法
showName:function(){
alert(
this.name);
},
showAge:function(){
alert(this.age);
}
}
//调用属性
alert(
Tom.name);
alert(Tom.age);
//调用方法
Tom.showName();
工厂模式创建对象
function Person(name,age,job){
//创建一个空对象
// var o = new Object();//方式一
var o = {};//方式二
o.name = name;
o.age = age;
o.job = job;
o.showName = function(){
alert(
this.name);
}
o.showAge = function(){
alert(this.age);
}
o.showJob = function(){
alert(this.job);
}
return o;
}
var Tom = Person('tom',18,'程序猿');
Tom.showJob();
var Jack = Person('jack',19,'攻城狮');
Jack.showJob();
构造函数
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.showName = function(){
alert(
this.name);
}
this.showAge = function(){
alert(this.age);
}
this.showJob = function(){
alert(this.job);
}
}
//new的作用就相当于工厂模式中最开始创建了一个空对象,最后把对象返回
var Bob = new Person('bob',18,'产品汪');
Bob.showJob();
var Alex = new Person('alex',19,'运营喵');
Alex.showJob();
alert(Bob.showName == Alex.showName);//false
原型模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
Person.prototype.showName = function(){
alert(
this.name);
}
Person.prototype.showAge = function(){
alert(this.age);
}
Person.prototype.showJob = function(){
alert(this.job);
}
}
//先去自己的对象中找showName函数,再去构造函数的原型找
var Lucy = new Person('lucy',18,'测试鼠');
//重写自身对象中的方法,不会影响其它对象
Lucy.showName = function(){
alert('我的名字是' +
this.name);
}
Lucy.showName();//我的名字是lucy
var Lily = new Person('lily',19,'市场鸡');
Lily.showName();//lily
alert(Lucy.showName == Lily.showName);//false
call和apply的区别
二者都可以改变当前的this,区别在于apply方法要将参数放入数组中再传参
function aa(a,b){
alert('我的this是' + this + ',我的a是' + a + ',我的b是' + b);
}
//我的this是[object Window],我的a是2,我的b是3
// aa(2,3);
//我的this是abc,我的a是2,我的b是3
// aa.call('abc',2,3);
//我的this是abc,我的a是2,我的b是3
aa.apply('abc', [2,3]);
函数的继承
//父类
function Fclass(name, age){
this.name = name;
this.age = age;
}
Fclass.prototype.showName = function(){
alert(
this.name);
}
Fclass.prototype.showAge = function(){
alert(this.age);
}
//子类
function Sclass(name, age, job){
//属性用call或者apply的方式来继承
Fclass.call(this, name, age);
this.job = job;
}
//方法继承:将父类的一个实例赋值给子类的原型属性
Sclass.prototype = new Fclass();
Sclass.prototype.showJob = function(){
alert(this.job);
}
//由于已经继承了父类的属性和方法,所以可以直接调用
var Driver = new Sclass('tom',18,'老司机');
Driver.showName();
Driver.showAge();
Driver.showJob();
jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。
jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。
jQuery加载
$(function(){
var $div = $('#div');//CSS样式怎么写,这里就怎么写
//html()方法相当于原生JS的innerHTML
alert($div.html() + 'jQuery');
})