- 首先我们要搞清楚什么是对象
万物皆对象
字面量 – 字面上显示的东西叫做字面量
包装类 – 没有new的函数声明就是包装类
什么是对象
1.只要是对象就可以有自己的私有属性。
2. 只要是new 出来的都是对象。
3. 不同对象肯定不会相等的。
4. 对象都会有引用机制 。
- 如果不想引用就重新赋值
- 生命周期:
面向对象 - 最有用的就是私有属性
面向对象的三大特点:
1、封装 2、继承 3、多态
prototype 原型
可以向对象添加属性和方法
var str="66666";
var str2=new String("1215");
String.prototype.my=99;
console.log(str.my); //添加属性
String.prototype.your=function(){
alert("添加了一个方法")
}
str.your();
this指向
1/在普通函数下 this指向的是 window
2/ 有事件源指向事件源本身
3/ 在定时器下 除es6 this 指向window。
4/ 对象下 this 指向的是自己本身。
继承 - 子级可以用父级的属性和方法,但是父级不能用子级的
function A(){
this.name = 'abc';
}
A.prototype.showName = function(){
alert(this.name)
}
function B(){
//this指向是new出来的B B.name = 'abc';
A.call(this);
}
B.prototype = A.prototype;
B.prototype.fn = function(){
alert('123')
}
var objB = new B();
var objA = new A();
// alert(B.name)
objB.showName()
objA.fn()
Jquery它是javascript的一个轻量级框架,是对javascript进行封装,他的底层全身JS的代码他到底是如何封装的呢 我带大家看看下面
第一部:
//用一个立即执行函数
(function() {
})()
第二部:
(function() {
function JQuery(selector) {
return new JQuery.prototype.init(selector); //在JQuery函数原型里面添加方法
}
return window.$ = $ = JQuery; //创建一个$叫JQuery的函数;
})()
第三步:
(function() {
function JQuery(selector) {
return new JQuery.prototype.init(selector); //在JQuery函数原型里面添加方法
}
JQuery.prototype.init = function(selector) { //这是模仿JQuery里面DOM节点的方法
this.length = 0;
if (selector.indexOf('.') != -1) {
var dom = document.getElementsByClassName(selector.slice(1))
} else if (selector.indexOf("#") != -1) {
var dom = document.getElementById(selector.slice(1))
}
if (dom.length == undefined) {
this[0] = dom;
this.length = 1;
} else {
for (var i = 0; i < dom.length; i++) {
this[i] = dom[i];
this.length++;
}
}
}
return window.$ = $ = JQuery;
})()
接下来就用就是最重要的部分如果将封装好的方法一次性的放入JQuery原型里面
第四步:
(function() {
function JQuery(selector) {
return new JQuery.prototype.init(selector);
JQuery.prototype.init = function(selector) {
this.length = 0;
if (selector.indexOf('.') != -1) {
var dom = document.getElementsByClassName(selector.slice(1))
} else if (selector.indexOf("#") != -1) {
var dom = document.getElementById(selector.slice(1))
}
if (dom.length == undefined) {
this[0] = dom;
this.length = 1;
} else {
for (var i = 0; i < dom.length; i++) {
this[i] = dom[i];
this.length++;
}
}
}
JQuery.prototype.css = function(config) { //创建一个用CSS的方法
for (var i = 0; i < this.length; i++) {
for (var attr in config) {
this[i].style[attr] = config[attr];
}
}
return this;
}
console.log(JQuery.prototype.init.prototype)
JQuery.prototype.init.prototype = JQuery.prototype; 就是这个步骤我将这个原型直接赋JQuery.prototype.init.prototype就用单个添加了。
return window.$ = $ = JQuery;
})()
console.log($(".div").css({ //模仿的JQuery的方法
width: "100px",
height: "100px",
backgroundColor: 'red'
}).css({
color: "pink"
}))