首页 > 编程语言 >深入学习jquery源码之jQuery中高质量的代码

深入学习jquery源码之jQuery中高质量的代码

时间:2023-02-23 22:01:48浏览次数:38  
标签:jquery jQuery arr obj name function 源码 guigeArr var


深入学习jquery源码之jQuery中高质量的代码

1、this指向的问题 

function Student(name,age,grade,school){    
Person.apply(this,arguments);
}

他就具备了Person类的sayhello方法和所有属性。通过实例可以调用了

 

2、返回数组(其他元素转为数组元素)

function (num) {
return num != null ?
// Return just the one element from the set
(num < 0 ? this[num + this.length] : this[num]) :
// Return all the elements in a clean array
[].slice.call(this)
}
或者是
Array.prototype.slice.call(arguments)

 

3、数组的合并包含重复的元素

( [0,1,2], [2,3,4] ) // [0,1,2,2,3,4]
function (first, second) {
var len = +second.length,
j = 0,
i = first.length;

while (j < len) {
first[i++] = second[j++];
}

// Support: IE<9
// Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)
if (len !== len) {
while (second[j] !== undefined) {
first[i++] = second[j++];
}
}

first.length = i;

return first;
}

 

4、定义对象

var target = arguments[0] || {}

如果arguments[0]具有真值(不是undefined,null,NAN,false,0中的任意一种),则这个a可以被使用。
否则将arguments[0]定义为一个空的object对象{}。

表达式 = 赋值表达式

a.x = a = 3;

的真正含义是

var obj = {n: 0};
function fn() { return obj; }
fn().n = 123;

 

5、判断是否为空对象的方法

function (obj) {
var name;
for (name in obj) {
return false;
}
return true;
}

 

6、call与apply的使用

a.call(obj)
相当于 obj.a()
hasOwn.call(obj, "constructor")
push.apply(results, context.getElementsByClassName(m))

数组的合并

ret = []
concat.apply([], ret) //等价于 [].concat(ret)
Array.prototype.push.apply(a,b) //等价于 a.push.(b)

比较数组中最大的数

Math.max.apply(null,arr); //等价于 null.max(arr)

 

7、new 运算符做了那些事情

function a(c){
this.b = c;
this.d =function(){
alert(this.b);
}
}
var obj = new a('test');

1、var obj={}; 也就是说,初始化一个对象obj。
2、obj.__proto__=a.prototype;
3、a.call(obj);也就是说构造obj,也可以称之为初始化obj。

 

8、匿名函数的使用上下文是window,相当于给windows增加了一个新的对象或者命名空间,加上一对括号让它马上执行

if (data && jQuery.trim(data)) {
(window.execScript || function (data) {
window["eval"].call(window, data);
})(data);
}

构造函数,里面的其他定义都是私有的外部无法访问,加了this前缀的成员相当于公开成员,外部可以访问

function F(x)
{
this.x = x;
function double(x){return x*x;}
this.getDoubleX = function(){
return double(this.x);
}
}

f = new F(12);
alert(f.getDoubleX());

 

9、函数声明与函数表达式的区别

function a(){ 
alert("a")
}
var b = function(){
alert("b")
}

前者为函数声明,后者为函数表达式。
函数声明作为一种声明,当然会在预编译阶级有所动作(声明提前),而函数表达式则不会。
函数声明不能直接加一对括号让它们执行。(function a(){alert("a")})()
表达式还可以继续细分,表达式是由常量,变量,操作符,函数等组合而成,计算以后返回一个结果值,至少也会返回一个undefined。

 

10、includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
数组对象转为数组

var arr = [
{guigeArr:['蓝色','XL','3','S']},
{guigeArr:['蓝色','L','6','S']},
{guigeArr:['蓝色','L','3','S']},
{guigeArr:['蓝色','XL','6','S']},

{guigeArr:['黑色','XL','3','S']},
{guigeArr:['黑色','L','6','S']},
{guigeArr:['黑色','L','3','S']},
{guigeArr:['黑色','XL','6','S']},
]

arr.forEach(({guigeArr})=>{
guigeArr.forEach((v,i)=>{
if(!newArr[i].includes(v))
newArr[i].push(v)
})
})

console.log(newArr)
// [["蓝色", "黑色"], ["XL", "L"], ["3", "6"], ["S"]]

 

11、js弱类型语言
对象的属性确实可以通过类似于通过访问数组的中括号形式进行访问。
在js里,对象就是普通的键值对存取数据,Array类型的数据都是一维的,通过索引来存取数据,数字下标的数据集合。

深入学习jquery源码之jQuery中高质量的代码_数组

var obj = {
name:'lily',
year:'20'

}
//用属性值获取
alert(obj.year);
// 用变量获取
alert(obj[y]);

定义对象

var i = 1,target = arguments[0] || {};
if ((options = arguments[i]) != null) {
// Extend the base object
for (name in options) {
target[name] = copy;
}
}

对象和数组的遍历

var arr = [1,2,3,4,5,6]
var stu = {
name : "张三",
sex : "男",
age : 18,
address : "四川成都",
}

for (var i in arr) {
console.log(i, arr[i]);
//输出
//0 1
//1 2
//2 3
//3 4
//4 5
//5 6
}
for (var i in stu) {
console.log(i, stu[i]);
//输出
//name 张三
//sex 男
//age 18
//address 四川成都
}

 

标签:jquery,jQuery,arr,obj,name,function,源码,guigeArr,var
From: https://blog.51cto.com/u_11837698/6081945

相关文章