JavaScript加强

it2022-05-05 116

1.JavaScript简介

JavaScript简称js,是一门用于前端开发的一门面向对象的脚本语言,动态响应,获取数据,而且无需编译,直接放浏览器运行. Web前端有三层： HTML：从语义的角度，描述页面结构 CSS：从审美的角度，描述样式（美化页面） JavaScript：从交互的角度，描述行为（提升用户体验）

2.JavaScript面向对象

2.1.一切皆对象

JavaScript中一切皆对象，在JavaScript中我们可以把任何(基本数据)类型当成对象来使用。这点于Java中既然不同，Java中的基本数据类型是不能调用方法，只能通过包装类型。

(1)JavaScript中一切皆对象，在JavaScript中我们可以把任何(基本数据)类型当成对象来使用。 (2)基本数据类型:number/boolean/string/null(值:null)/undefined(undefined) (3)引用数据类型:Object/Array/Regexp/Date/Number/Boolean/String…

//基本数据类型中number. var num1 = 3.14159; console.debug(num1.toFixed(2)); //一切皆对象 console.debug(typeof num1);//number //引用数据类型Number var num2 = new Number(3.14159); console.debug(num2.toFixed(2)); console.debug(typeof num2);//object

2.2.js中true和false的判断

js 中所有值的真假性: 0,"",undefined,NaN,null,false(基本数据类型的false)为false,其他值都为true.

var b1 = false; if(b1){ console.debug("看能不能出来"); } //js 中所有值的真假性: 0,"",undefined,NaN,null,false(基本数据类型的false)为false,其他值都为true. var b2 = new Boolean(false);// 这里是创建的一个对象添加值,对象肯定不为空 if(b2){ console.debug("哈哈哈"); }

2.3 创建对象和操作

//普通创建 var obj = new Object(); //添加元素 obj.name = "妞妞"; obj.age = 11; //添加方法 obj.eat = function(){ console.log("2222"); }; //josn创建 var obj1 = {"age":20,"name":"花花"}; obj1= {"sex":"女"}; console.log(obj1.sex); //如果要创建一个引用数据类型对象, 需要先创建一个函数(构造方法) function Person(){} var person = new Person(); person.name = "哈哈"; person["sex"] = "女人"; person.age = 22; //调用方法就不用打印了 obj.eat(); //这两种都能调用, console.log(person.name); //这种适合在 for in 循环的时候取值 console.log(person["name"]); //遍历方式 var obj = {}; obj.name = "huahua"; obj.age = 22; obj.paly = function(){ console.log("你要培训挨不过"); } //遍历 for in for(var key in obj){ //不能这样写因为obj里面没有 key这个属性 //console.log(obj.key); //这样写可以,但是方法不能直接打印出里面的属性 //console.log(obj[key]); //所以遍历需要判断看是不是方法 if(typeof obj[key] == 'function'){ obj[key](); }else{ console.log(obj[key]); } }

2.4.JSON对象和JSON字符串

//json 字符串 var jsonStr = '{"name":"哈哈哈","age":18}'; console.log(jsonStr); //json 字符串转成json对象 eval方式 var jsonObj = eval("("+jsonStr+")"); console.log(jsonObj); //JSON.parse 方式但是jsonStr必须是标准的格式 var jsonObj1 = JSON.parse(jsonStr); console.log(jsonObj1); //jquery也有方法转换底层还是使用JSON.parse方法进行转换，也就是字符串格式也必须要标准的 var jsonObj2 = $.parseJSON(jsonStr); console.log(jsonObj2);

2.5.Js类 JavaScript中没有为我们提供像Java中定义类的关键字class。JS中定义类只需要定义这个类的构造函数即可，函数名使用首字母大写。 (1)JavaScript中没有为我们提供像Java中定义类的关键字class。 (2)JS中定义类只需要定义这个类的"构造函数"即可；构造函数与普通函数没区别. (3)只要是类，类名就是首字母大写。

//构造函数中this,就是实例对象 //如果要为对象添加属性,那么需要使用 "this.属性名 = 值;" function Person(name,age){ this.name = name; this.age = age; } var p1 = new Person("花花",22); var p2 = new Person("小子",33); console.log(p1); console.log(p2);

2.6window的name属性我们说过，变量要先定义才能使用。但是name是一个特殊的，可以当成java中关键字。直接使用name表示是使用的window.name属性。默认window.name是空字符串。但是我们可以给这个name赋值。

//函数的name var fun1 = new Function("a","b","return a+b"); fun1.name = "牛逼"; fun1.age = 43; //函数里面name的值比较特殊它是只读的不可修改 console.log(fun1); //window里面默认有个属性name 默认值的空字符串 console.log(window.name); window.name = "湿哒哒所大"; console.log(window.name); var name = "你是假的"; console.log(window.name);

2.8.js中的this

//this表示，谁调用这个方法，this就指向谁。 var obj = { "name" : "康娜酱" }; function sayHello() { return this.name;//谁调用这个方法sayHello，this就代表是谁 } obj.say = sayHello;//赋值 console.debug(obj.say());//康娜酱 sayHello是obj对象在调用，所以this指向了obj. console.debug(sayHello());//空字符串直接调用sayHello，相当于是window.sayHello(),所以this指向window，默认的window的name是空字符

3.prototype原型

(1）什么是原型：prototype，他是类或者对象里面的属性，通过他可以给对象添加属性和方法, 在一个类中加上原型方法，它对应的所有对象都拥有了这个方法. (2) 每个对象原型是共享的,多个对象只要类相同，它们的原型也是相同的 (3)属性查找规则，先从自定义的属性上面找，没有找到，在从原型上面找 (自定义->原型->原型的原型,…)

类.prototype.方法名 = function(){}

/*prototype指原型的，每一个对象都有prototype的这个属性，我们可以通过该属性往对象上面添加属性和方法*/ function User(name,age,sex){ this.name = name; this.age = age; this.sex = sex; /*this.eat = function(){ console.log('不知道啊啊,要不要死了'); }*/ } User.prototype.eat = function(){ console.log('asdsadasdsa..'); } var user1 = new User('小爱',18); console.dir(user1); var user2 = new User('小炮',28); console.dir(user2); //对象里面原型属性 --这个原型属性也是一个对象 console.dir(user1.prototype === user2.prototype); console.dir(user1.__proto__ === user2.__proto__); //(1)同一个类的不同实例的原型是共享的; user1.__proto__.age = 22; //(2)对象属性查找规则，先从自定义的属性上面找，如果找到，就返回，如果没有，从原型上面去找 console.log(user1); console.log(user2); console.log(user2.age);//undefined user1.eat();

3.1回调函数

回调函数就是一个通过函数(对象)引用调用的函数; 如果你把函数的引用（地址）作为参数传递给另一个函数，当这个引用被用来调用其所指向的函数时，我们就说这是回调函数。

//回调函数：就是一个通过函数(对象)引用调用的函数; //这里设置定时器调用的时候不加扩号,加了就是立马执行 setTimeout(Time,3322); function Time(){ alert("222"); }

3.2匿名函数

//匿名函数：没有名称的函数 //匿名函数有什么用：一次性执行 //推荐写法一般用这个 (function(){ //alert(1111); })(); /* ~function(){ alert(2222); }();*/ /*+function(){ alert(3333); }(); */ /*匿名函数有什么用：（1）只想执行一次可以使用，解决作用域污染问题(比如只想要结果，可以屏蔽不要的实现) （2）作为一个参数来传递*/ //解决作用域污染 var x = 10; var y = 20; var z = x*y; //只要结果.但是z 跟y 都到作用域以后了 console.log(z); console.log(window); //正确写法:使用()括起来： // (function(name){ // console.debug("请说出你的名字:" + name); // })//这样就表示申明了一个函数，只是说是一个匿名函数。但是还没有调用 //直接调用匿名函数:函数的调用：函数名(); (function(name) { console.debug("请说出你的名字:" + name); })();//现在是调用了，但是没有传参数 (function(a, b) { var result = a * b;//用一个局部变量接收 window.result = result;//赋值给window的一个全局变量 })(10, 50);//传参调用 console.debug(result); console.debug(window);

3.3闭包(面试题)

//最简单的闭包，函数里面使用函数外面的变量 var name = '哈哈哈'; function get(){ console.log(name); } get(); var sum = 0; function add(){ return sum++; } console.log(add()); console.log(add()); sum = 10; console.log(add()); console.log(add()); console.log(add()); //打印结果0,1,10,11,12 //闭包：实现只读的属性 //闭包和匿名函数结合来使用实现只读的属性 (function(){ var a = 0; //这里要用window 存到作用于才能被调用 window.getsum = function(){ return a++; } })() console.log(window.getsum()); console.log(window.getsum()); console.log(window.getsum()); a = 22; console.log(window.getsum()); console.log(window.getsum()); //打印结果 0,1,2,3,4

3.4事件委托前面的基本的事件绑定，在功能有一个局限。就是绑定事件的元素，必须是在绑定的时候已知的、存在的。对于以后出现的元素是不起作用，事件委托就可以处理这种情况。下面是一个列子: 有这么一个需求，已经存在一个添加附件的组件，现在因为需求原因，需要动态增加多个添加附件的组件，同时增加删除，查看等操作。

专利

最新回复(0)