一、jQuery无new构建实例
1、$就是jQuery的别称
可以在$和jQuery对象挂在在window中,实现全局引用。
给Windows对象扩展一个$的属性,让它拿到jQuery构造函数的引用
可以用$访问到jQuery的构造函数
// jQuery.js
(function(root) {
var jQuery = function(){
}
root.$ = root.jQuery = jQuery;
})(this)
2、$()就是在创建jQuery的的实例对象
调用$()方法的目的是创建一个实例,构造函数直接调用是当做一个普通的函数来处理的
// jQuery.js
(function(root) {
var jQuery = function() {
}
})(this)
具体代码:
// jQuery.js
(function(root) {
var jQuery = function() {
console.log('生成一个实例对象');
};
root.$ = root.jQuery = jQuery;
})(this)
3、什么是构造函数
①构造函数也是一个普通函数,创建方式和普通函数一样,但习惯上首字母大写(小写也是可以的),用new关键字调用
②和普通函数的区别:
1)调用方式不一样
普通函数调用:直接调用,如,person()
构造函数调用:使用new关键字调用,如,new Person()
2)作用不同
构造函数用来新建实例对象
③构造函数的函数名和类名相同:Person()这个构造函数,Person既是函数名,也是这个对象的类名
④内部用this来构造属性和方法
function Person(name, gender, age) {
this.name = name;
this.gender = gender;
this.age = age;
this.sayHi=function(){
alert("Hi")
}
}
当创建上面的函数以后, 我们就可以通过 new 关键字调用,也就是通过构造函数来创建对象了
var p1 = new Person('张三', '男', 14); // 创建一个新的内存 #f1
var p2 = new Person('李四', '女', 28); // 创建一个新的内存 #f2
⑤构造函数的执行流程
A、立刻在堆内存中创建一个新的对象
B、将新建的对象设置为函数中的this
C、逐个执行函数中的代码
D、将新建的对象作为返回值
其他说法:
1、当以new关键字调用时,会创建一个新的内存空间 #f1,并标记为Person的实例
2、函数体内部的this指向该内存空间 #f1
以上两步:每当创建一个实例的时候,就会创建一个新的内存空间(#f1,#f2),创建#f1的时候,函数体内部的this指向#f1,创建#f2的时候,函数体内部的this指向#f2
3、执行函数体内的代码
给this添加属性,就相当于给实例添加属性
4、默认返回this
由于函数体内部的this指向新创建的内存空间(默认返回 this ,就相当于默认返回了该内存空间,也就是上图中的 #f1),而该内存空间(#f1)又被变量p1所接受。也就是说 p1 这个变量,保存的内存地址就是 #f1,同时被标记为 Person 的实例。
⑥普通函数:因为没有返回值,所以为undefined
function person(){
}
var per = person()
console.log(per) // undefined
⑦构造函数
1)默认返回this
function Person1(){
this.name = 'zhangsan';
}
var p1 = new Person1()
console.log(p1) // Person1 {name: "zhangsan"}
console.log(p1.name) // zhangsan
首先,当用 new 关键字调用时,产生一个新的内存空间 #f11,并标记为 Person1 的实例;
接着,函数体内部的 this 指向该内存空间 #f11;
执行函数体内部的代码;
由于函数体内部的this 指向该内存空间,而该内存空间又被变量 p1 所接收,
所以 p1 中就会有一个 name 属性,属性值为 ‘zhangsan’。
2)手动添加一个基本数据类型的返回值,最终还是返回 this
function Person2() {
this.age = 28;
return 50;
}
var p2 = new Person2();
console.log(p2) // Person2 {age: 28}
console.log(p2.age); // 28
如果上面是一个普通函数的调用,那么返回值就是 50
- 手动添加一个复杂数据类型(对象)的返回值,最终返回该对象
例一:
function Person3() {
this.height = '180';
return ['a', 'b', 'c'];
}
var p3 = new Person3();
console.log(p3.height); // undefined
console.log(p3.length); // 3
console.log(p3[0]); // 'a'
例二:
function Person4() {
this.gender = '男';
return {
gender: '中性' };
}
var p4 = new Person4();
console.log(p4.gender); // '中性'
⑧不用new关键字,直接运行构造函数,是否会出错?如果不会出错,那么,用new和不用new调用构造函数,有什么区别?
1)用new调用构造函数,函数内部会发生如下变化:
创建一个this变量,该变量指向一个空对象。并且该对象继承函数的原型;
属性和方法被加入到this引用的对象中;
隐式返回this对象(如果没有显性返回其他对象)
用伪程序来展示上述变化:
function Person