JS薄弱点记录

发布时间:2019-08-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JS薄弱点记录脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

一、函数定义

JS使用关键字function定义函数,有三种定义方式(有时候也说有三种声明方式)。
1.函数声明

function functionName(parameters) {
     //执行代码
}
注意:函数声明后不会立即执行,在需要的时候调用。

2.函数表达式

 VAR x = function(a,b) {return a+b;}//匿名函数,函数存储在变量x中
 var z = x(4,3);//通过变量名x来调用匿名函数

3.Function()构造函数/函数对象
即,通过内置的JS函数构造器(Function())定义

var adDFunction = new Function("a","b","return a+b");
var res = addFunction(3,4);//调用

注意:new Function("a","b","return a+b")是不对的,会产生如下错误:

JS薄弱点记录


☆ 在实际使用中,尽量避免使用new关键字,所以第3种方法不常用。
JavaScript是一种PRototypical(原型)类型语言,在创建之初,是为了迎合市场的需要,让人们觉得它和Java是类似的,才引入了new关键字。Javascript本应通过它的Prototypical特性来实现实例化和继承,但new关键字让它变得不伦不类。

二、函数调用

JS函数有4中调用方式,每种方式的不同在于this的初始化。
函数中的代码在函数被调用后执行。
1.作为一个函数调用

function myFunc(a,b) {
    return a + b;
}
myFunc(3,4); //返回20,在浏览器的控制台才能看到该输出

myFunc函数不属于任何对象,但是JS默认它是全局对象。
HTML中,默认全局对象是HTML页面本身,因此函数myFunc属于HTML页面。
在浏览器中,页面对象是浏览器窗口(Window 对象),即myFunc自动变为window对象。
即,myFunc()和window.myFunc()一样。
注意:这是函数调用的常用方法,但是不是良好的变成习惯。全局变量、方法或者函数容易造成命名冲突的bug。

2.函数作为方法调用
即,将函数定义为对象的方法。

var myObject = {
    FirstName:"John",//对象myObject的属性
    lastName: "Doe",//属性
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }//方法
}
myObject.fullName();         // 返回 "John Doe"

fullName方法是一个函数,函数属于对象myObject
this的值为myObject对象

3.使用构造函数调用函数
如果函数调用前使用了new关键字,则是调用了构造函数。

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;//构造函数中的this关键字没有任何值,其值在函数调用实例化对象(new object)时创建。
    this.lastName  = arg2;
}
 
// 构造函数的调用会创建一个新的对象,新对象会继承构造函数的属性和方法
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

4.作为函数方法调用函数
JS中,函数是对象,有它的属性和方法
call()和apply()是预定义的函数方法,两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

function myFunc(a, b) {
    return a * b;
}
myObj = myFunc.call(myObj, 10, 2);     // 返回 20  //callcall的第二个参数传入函数的参数
function myFunc(a, b) {
    return a * b;
}
myArray = [10, 2];
myObj = myFunction.apply(myObj, myArray);  // 返回 20  //apply传入参数数组

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象,比如,传入nullundefined也会保持原样不被转换为window对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 nullundefined, 它将使用全局对象替代

三、关键字this的理解

函数在运行时,在函数内部自动生成的一个对象,只能在函数内部使用个。一般来说,JS中,this指向函数执行时的当前对象。
函数没有被自身的对象调用时,this的值就会变成全局对象(浏览器中是浏览器窗口,window对象)
总结:随着函数使用场合的不同,this 的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

function myFunc(){
   return this;
}
myFunc();//[object Window]

情况1.纯粹的函数调用
全局性调用,this代表全局对象。

var x = 1;
function test() {
    console.LOG(this.x);
}
test(); //1

情况2.作为对象方法的调用
当函数作为某个对象的方法调用时,this指的就是这个上级对象。

function test() {
    console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); //1

情况3.作为构造函数调用
构造函数是什么呢?
——就是通过这个构造函数,可以生成一个新的对象。
此时,this就是这个新的对象。

function test() {
   this.x = 1;
}//构造函数

var obj = new test();//通过构造函数生成一个新对象
obj.x;//1

分析:

var x = 2;//创建一个全局变量

function test() {
   this.x = 1;
}//构造函数

var obj = new test();//通过构造函数生成一个新对象
console.log(obj.x);//1

console.log(x); //2

x的运行结果为2,说明全局变量x的值并没有改变.
情况4.apply调用
apply()是函数的一个方法,作用是改变函数的调用对象。第一个参数就表示改变后的调用这个函数的对象。也就是this指的就是apply的第一个参数。
当apply的参数为空的时候,默认调用全局对象。

var x = 0;
function test() {
   console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply();//0  //this指的是全局变量
obj.m.apply(obj);//1 //this指的是obj

四、数据类型

文章“JS重要知识点记录(一)”

五、cookie

Cookie用于存储web页面的用户信息。是一些数据,存储于脑上的文本文件中。
当web服务器向浏览器发送web页面时,在连接关闭后,服务端不会记录用户的信息。而Cookie的作用就是用于解决“如何记录客户端的用户信息”:

  • 当用户访问web页面时,他的名字可以记录在Cookie中。
  • 当用户下一次访问该页面时,可以在cookie中读取用户访问记录。

Cookie以名/值对形式存储,如下所示:

username = Joy Ann

当浏览器从服务器上请求web页面时,属于该页面的Cookie会被添加到该请求中。服务端通过这种方式来获取用户的信息。

六、面向对象(JS的基于原型与Java的基于类的区别)

基于类的面向对象语言:Java和C++,是构建在两个不同实体的概念之上:类和实例。
类(class):一类抽象的事物,定义了这类事物的属性(即方法和变量)
实例(instance):类的一个成员。实例具有父类所有的属性,还可以包括自身独有的属性。
基于原型的语言不存在类和实例的区别:只有对象。

基于类的 基于原型的
1.定义类 1.定义原型对象
2.定义类的构造函数 2.定义对象的构造函数
3.实例化对象 3.将构造函数关联到原型
4.实例化对象

注意:ES6中引入的class概念依然是基于原型的原理。
推荐一篇描述很清晰的文章:https://segmentfault.com/a/11...
小结一下:

1、prototype 就是函数的一个属性
2、prototype属性本身也是一个对象
3、当我们把一个函数Foo()当做构造器来创建一个新的对象f = new Foo()的时候,新对象f就可以访问到Foo()函数的prototyPE对象中的属性
4、new在创建一个新的对象f的时候,会赋予新对象f一个属性(_proto_)指向构造器的 prototype 属性
5、当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性,如果没有就查找它的原型(也就是 proto 指向的 prototype 对象),如果还没有就查找原型的原型(prototype 也有它自己的 __proto__,指向更上一级的 prototype 对象),依此类推一直找到 Object 为止
6、一个对象,它有许多属性,其中有一个属性指向了另外一个对象的原型属性;而后者也有一个属性指向了再另外一个对象的原型属性。这就像一条一环套一环的锁链一样,并且从这条锁链的任何一点寻找下去,最后都能找到链条的起点,即 Object;因此,我们也把这种机制称作:原型链。
7、既然 proto 可以访问到对象的原型,那么为什么禁止在实际中使用呢?
这是一个设计上的失误,导致 proto 属性是可以被修改的,同时意味着 JavaScript 的属性查找机制会因此而“瘫痪”,所以强烈的不建议使用它。

七、常用库——jquery

测试 JavaScript 库(即引用它):

<!--在head标签中引入JQuery库-->
<script src="http://apps.bdimg.COM/libs/jquery/2.1.1/jquery.min.js">
</script>

主要的 jQuery 函数: $() 函数(jQuery 函数)
比较使用JS语法和JQuery语法实现同一个功能的区别:

//JS方式
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
//JQuery方式
function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);//注意JQuery返回的是jquery对象,因而不能使用HTML DOM对象的属性或方法

JQuery允许链接,即链式语法。

function myFunction() {
     $(#id1).attr("style","color:red").html("hello JQuery")
}

八、常用框架

Vue

脚本宝典总结

以上是脚本宝典为你收集整理的JS薄弱点记录全部内容,希望文章能够帮你解决JS薄弱点记录所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。