10-02-复习 jsonp、call、apply、bind、new原理

最新推荐文章于 2023-07-03 01:31:28 发布
最新推荐文章于 2023-07-03 01:31:28 发布
阅读量117 收藏
点赞数
分类专栏： 20-面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ange997/article/details/108954216
版权

发送传统ajax的几大经典步骤

// 第1步：创建一个xhr对象
let xhr = new XMLHttpRequest();
// 第2步：设置连接
xhr.open("get","http://localhost:3000/api/v1")
// 第4步：监听xhr状态变化
if(xhr.onreadystatechange == 4 && xhr.status == 200){
    console.log(xhr.responseText)
}
// 第3步：发出请求
xhr.send(null)

什么是同源策略？

答：同源策略是为了保证用户信息安全，是浏览器的机制，防止恶意的网站窃取别人的数据，只允许访问来自同一个站点的资源
同源是指：协议相同，域名相同，端口相同。这三者相同就是同源。如果不同源，浏览器就会作出限制。

开发android或ios有跨域问题吗？
答：没有

使用RN或flutter开发原生APP，有跨域问题？
答：没有

JSONP原理

JSONP不是ajax发送的请求，是script标签的src发送的请求。
jsonp原理.js

// JSONP原理
function jsonp(options){
    // 1）产生一个函数名（函数名随机）
    let callBackName = 'wancai'+Math.random().toString().substr(2) + Math.random().toString().substr(2);

    // 2）定义函数  全局函数
    window[callBackName] = function(params){
        if (params !== null){
            options.success(params)
        }else{
            options.failure(params)
        }

        // 2-1) 删除之前创建的scripte标签
        scriptE.remove();
        // 2-2) 把创建的全局函数设置为null
        window[callBackName] = null;
    }
    // 3）取出url地址
    let jonspUrl;
    if(options.data !== undefined){
        jonspUrl = options.url + "?" + options.data + "&callBack="+callBackName
    }else{
        jonspUrl = options.url + "?callBack="+callBackName
    } 
    // 4）创建一个script标签
    let scriptE = document.createElement("script");
    scriptE.src = jonspUrl
    document.body.appendChild(scriptE)
}

let btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
   /* // 第1步：创建一个xhr对象
    let xhr = new XMLHttpRequest();
    // 第2步：设置连接
    xhr.open("get","http://localhost:3000/api/v1")
    // 第4步：监听xhr状态变化
    if(xhr.onreadystatechange == 4 && xhr.status == 200){
        console.log(xhr.responseText)
    }
    // 第3步：发出请求
    xhr.send(null)*/

    // 使用JSONP发出请求
    jsonp({
        url:"http://localhost:3000/api/v1",
        data:"a=1&b=2",
        success:function (data) {
            console.log(data)
        },
        failure:function (data) {
            console.log("数据请求失败")
        }
    })

})

server.js

let express = require("express");
let app = express();
app.get("/api/v1",(req,res)=>{
   /* console.log(`${req.query.callBack}(${ JSON.stringify({
        "name":"wangcai",
        "age":100
    }) })`);*/

    res.send(`${req.query.callBack}(${ JSON.stringify({
        "name":"wangcai",
        "age":100
    }) })`)
})
app.listen(3000,()=>{
    console.log("server is running on 3000~")
})

index.html

<button id="btn">发送JSONP请求</button>
<script src="./jsonp原理.js"></script>

call原理

  • 改变this指向
  • 让函数立即执行

基本使用：

    function fn(num1,num2) {
        console.log(this)
        return num1+num2;
    }
    fn(); // => window
    fn.call();  // => window // 1）改变this指向   2）让fn执行
    let obj = {name:"wc"}
    console.log(fn.call(obj,1,2))   
    // => {name: "wc"}   // call也可以传递参数

定义一个函数，函数也是对象，对象就可以 .call ，如果不传递参数或直接调用，函数中的this指向window；传递的第一个参数是obj，函数中的this就指向obj。

模拟call

<script>
    ;(function(){	//context是obj
        function mycall(context){
           context = context ? Object(context) : window;
           // g调用了mycall，mycall中this指g，所以这个this代表g函数
           //context.f表示obj打点调用g函数，所以g函数中的this指向obj
           context.f = this;
           let args = [];
           for(let i = 1; i<arguments.length; i++){
               args.push(arguments[i])
           }
           let res = context.f(...args);
           delete context.f;
           return res;
        }
        //每个函数对象上都挂一个mycall方法
        Function.prototype.mycall = mycall;
    }())
    function g(a,b) {
        console.log(this);
        return a+b;
    }
    let obj = {name:"wc"}
    let r = g.mycall(obj,6,6);
    console.log(r)
</script>

apply原理

  • 改变this指向
  • 让函数立即执行

apply和call的区别：
仅仅是传参的区别，作用一样。apply有参数时，以数组的形式进行传递。

<script>
    ;(function () {
        function myapply(context,args) {
            context = context ? Object(context) : window;
            context.gn = this;
            if(!args){
              return  context.gn();
            }
            let res = context.gn(...args)
            delete context.gn;
            return res;
        }
        Function.prototype.myapply = myapply;
    }())
    // 模拟apply的实现
    function fn(num1,num2) {
        console.log(this)
        return num1 + num2;
    }
    console.log( fn.apply())
    let obj = {name:"wc"}
    console.log(fn.myapply(obj))
    console.log(fn.myapply(obj,[1,2]))
</script>

bind原理

call、apply、bind
三者都是用于改变函数体内this的指向，但是bind与apply和call的最大的区别是：bind不会立即调用，而是返回一个新函数，称为绑定函数，其内的this指向为创建它时传入bind的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。

bind：

  1. 改变this指向
  2. bind前面的函数不执行
  3. 返回一个绑定this之后的函数

bind的使用

<script>
    function fn(num1, num2) {
        console.log(this)
        console.log(num1 + num2)
        return num1 + num2;
    }
    let obj = { name: "wc" }
    let gn = fn.bind(obj, 1, 2)
    console.log(gn);	//函数fn
    gn();				//结果：{name:"wc} 3 
    console.log(gn()); //结果：{name:"wc} 3 3
</script>

<script>
    function fn(num1, num2) {
        console.log(this)
        console.log(num1 + num2)
        return num1 + num2;
    }
    let obj = { name: "wc" }
 	let gn = fn.bind(obj)
 	gn(4,5)					//结果 {name:"wc} 9
	console.log(gn(4,5)); 	//结果：{name:"wc} 9 9
</script>
let obj = { name:"wc" }
let gn = fn.bind(obj,6);
console.log(gn(8)); 结果 //结果：{name:"wc} 14  14
分别传给num1和num2，相当于传了[1,2]

let obj = { name:"wc" }
let gn = fn.bind(obj,6,6);
console.log(gn(8,8)); 结果 //结果：{name:"wc} 12  12 
相当于传了[6,6,8,8]

bind的原理

<script>
 ;(function () {
    function mybind(context) {
       // arguments是伪数组  可以转成数组(slice,1,删除数组的第一个元素)
       let bindArgs = Array.prototype.slice.call(arguments,1);
       // this指的是下面的fn函数  that指fn
       let that = this;
       function xxx() {
       	   //args表示可能是在调用gn函数时的传参
           let args = Array.prototype.slice.call(arguments);
           // this 指window 因为下面是window调用的
           //concat 连接数组
           return that.apply(context, bindArgs.concat(args)) // [1,3]
       }
       return xxx;	//需要返回一个函数
      }
    Function.prototype.mybind = mybind;
  }())
  function fn(num1,num2) {
      console.log(this)
      console.log(num1+num2)
      return num1+num2;
  }
  let obj = { name:"wc" }
  let gn = fn.mybind(obj,1,2)
  console.log(gn())
</script>

<script>
;(function () {
   function mybind(context){
       let bindArgs = Array.prototype.slice.call(arguments,1)
       // this就是fn
       let that = this;
       function Mn() {}
       function xxx() {
        // console.log(this) 这个this和下面new出的函数o指向一个队形
           let args = Array.prototype.slice.call(arguments)
         //如果this是xxx构造器构造的，就说明new了，就让fn中this指向new创建的
           return that.apply(this instanceof xxx ? this : context,bindArgs.concat(args))
       }
       // xxx.prototype = this.prototype; // 相当于改变xxx的原型会影响 fn的原型
       Mn.prototype = this.prototype;
       xxx.prototype = new Mn();
       xxx.prototype.m2 = 666;
       return xxx;
   }
     Function.prototype.mybind = mybind;
 }())
 function fn(a,b) {
     console.log(this)
     console.log(a+b)
     return a+b;
 }
 fn.prototype.m1 = 888;
 let obj = {name:"wc"}
 let gn = fn.mybind(obj,1)
 // console.log(gn(2));
 let o = new gn(2);
 console.log(o.m1)
 console.log(fn.prototype.m2)
</script>

new原理

内部创建一个对象 让this指向这个对象 返回这个对象

<script>
    function Dog(name) {
        // 内部创建一个对象  让this指向这个对象  返回这个对象
        this.name = name;  // 私有属性
        // return 123; // 返回基本数据类型没有任何含义
        /*return {
            age:100
        }*/
    }
    Dog.prototype.say = function(){  // 公有属性
        console.log("say...")
    }
    let wc = new Dog("wangcai")
    console.log(wc)
    console.log(wc.name)
    console.log(wc.say())
</script>

new是运算符，运算符只能使用函数来模拟

<script>
    // 模拟new的实现    问：new是什么？   答：运算符  现在要模拟运算符
    // 运算符只能使用函数来模拟
    function myNew() {
    //context等于Dog，shift会删除第一个并返回
    // let context = Array.prototype.shift.call(arguments)
        let context = [].shift.call(arguments)
        let newObj = {};
        newObj.__proto__ = context.prototype
        let r = context.apply(newObj,arguments)
        return r instanceof Object ? r : newObj;
    }
    function Dog(name) {
        this.name = name;
    }
    Dog.prototype.say = function(){  // 公有属性
        console.log("say...")
    }

    // let wc = new Dog("wangcai",1,2,3)
    let wc = myNew(Dog,"wangcai",1,2,3)

    console.log(wc)
    console.log(wc.name)
    console.log(wc.say())
</script>
ange997
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-jsonp:一个用于处理JSONP请求的小型库
05-02
$jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} ) 直接使用功能： import { jsonp } from 'vue-jsonp'jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} )发送数据并设置查询和函数...
python如何拟合函数_使用Pytorch来拟合函数方式
weixin_39617702的博客
12-04 1137
其实各大深度学习框架背后的原理都可以理解为拟合一个参数数量特别庞大的函数，所以各框架都能用来拟合任意函数，Pytorch也能。在这篇博客中，就以拟合y = ax + b为例(a和b为需要拟合的参数)，说明在Pytorch中如何拟合一个函数。一、定义拟合网络1、观察普通的神经网络的优化流程# 定义网络net = ...# 定义优化器optimizer = torch.optim.Adam(net.p...
下取整函数的含义_取整函数
weixin_39751391的博客
12-21 728
展开全部取整函数是指62616964757a686964616fe78988e69d8331333365653261不超过实数x的最大整数称为x的整数部分，记作[x]或INT(x)。该函数被广泛应用于数论，函数绘图和计算机领域。定义：不超过实数x的最大整数称为x的整数部分，记作[x]或INT(x)。x-[x]称为x的小数部分，记作{x}。(需要注意的是，对于负数，[x]并非指x小数点左边的部分，{...
chatgpt赋能python：如何用Python拟合数据求参数
最新发布
www_xuhss_com的博客
07-03 362
本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。🧡AI职场汇报智能办公文案写作效率提升教程 🧡专注于AI+职场+办公方向。下图是课程的整体大纲下图是AI职场汇报智能办公文案写作效率提升教程中用到的ai工具。
day14 函数的参数
xio小蜗的博客
11-26 531
函数的参数一 形参与实参介绍二 形参与实参的具体使用2.1 位置参数2.2 关键字参数2.3 默认参数2.4 可变长度的参数（*与**的用法）2.4.1 可变长度的位置参数2.4.2 可变长度的关键字参数2.5 命名关键字参数2.6 组合使用 一 形参与实参介绍 函数的参数分为形式参数和实际参数，简称形参和实参： 形参即在定义函数时，括号内声明的参数。形参本质就是一个变量名，用来接收外部传来的值。 实参即在调用函数时，括号内传入的值，值可以是常量、变量、表达式或三者的组合: #1：实参是常量 res=my_
python如何定义带有可选参数的函数_python中如何正确调用带可选参数的函数
weixin_39625586的博客
12-06 3169
我是python的初学者，遇到了一个需要可选参数的函数的问题。此函数获取可变数量的文件路径作为参数，可以是2到n个参数。之后，一定数量的可选参数可以传递给这个函数。我试过做这样的事：def compareNfilesParameters(*args):start_time = time.time()listFiles = []listParameters = []for argument in a...
koa-response-jsonp：koa jsonp中间件
02-03
koa-response-jsonp koa jsonp中间件安装npm install koa-response-jsonp --save用法const Koa = require ( 'koa' ) ;const app = new Koa ( ) ;const jsonp = require ( 'koa-response-jsonp' ) ;jsonp ( app ) ;...
jquery-jsonp-master.zip_jsonp
09-21
一个jquery文件，适合学习参考应用jquery轻量级
ember-jsonp:手动JSONP加载器
05-02
] 这是名为jsonp服务附加组件，可在不使用jQuery的情况下为jsonp ember-ajax的UX提供JSONP数据演示使用范例 ember install ember-jsonp this.get('jsonp').request(URL,context,success,error,options); <<OR>> ...
DJSON-Viewer：使JSONJSONP易于阅读
01-30
Chrome扩展程序，可以直接在浏览器标签中很好地打印和格式化JSON和JSONP。 格式化程序的初始基础，来自： 。 使用来自以下开发人员工具： 产品特点 格式化JSON和JSONP输入或响应 缩小或美化JSON 主题支持 语法高亮...
python:数据拟合求解方程参数
python学习者的博客
09-21 8640
首先引入三件套和scipy import numpy as np import pandas as pd import matplotlib.pyplot as plt from scipy.optimize import curve_fit 拿到实验数据,通过pandas读取为DataFrame data = pd.read_csv("W-900K.csv") data.head() 将数据绘制出来,以方便确认使用哪种方程进行拟合 ''' 遇到问题没人解答？小编创建了一个Python学习交流QQ群：
python自定义函数的参数拟合
图像研究猿的专栏
02-24 9658
example：xdata是输入，ydata是输出 import numpy as np import matplotlib.pyplot as plt from scipy.optimize import curve_fit def func(x, a, b, c): return a * np.exp(-b * x) + c # Define the data to be fit ...
TensorRT 一个builder只能在一个线程上运行
qq_29007291的博客
11-23 419
2.4. Thread Safety The TensorRT builder may only be used by one thread at a time. If you need to run multiple builds simultaneously, you will need to create multiple builders. 参考：https://docs.nvidia.com/deeplearning/tensorrt/best-practices/index.html ...
使用python拟合自己写的公式中的参数
x_uhen的博客
12-04 9711
python曲线拟合 1.多项式拟合范例： import matplotlib.pyplot as plt import numpy as np x = np.arange(1, 17, 1) y = np.array([4.00, 6.40, 8.00, 8.80, 9.22, 9.50, 9.70, 9.86, 10.00, 10.20, 10.32, 10.42, 10.50, 10...
下取整函数的含义_Excel数值取整的7种方式
weixin_39973271的博客
01-12 489
原标题：Excel数值取整的7种方式上期帮主原创：《高手会这样制作图表~》( 在Excel数据处理过程中，数值取整比较常见，且针对不同的要求我们需要采用不同的取整函数来解决。那今天帮主就和大家分享数值取整的7种方式，大家收藏备用！1INT函数取整INT应该是大家在数值取整中最熟悉的一个函数了，操作起来也非常简单。如下动图所示： 我们可以看到，数值为正数，去掉小数后直接取整。数值若为负数，去掉小数后...
python拟合求参,python 拟合曲线并求参
weixin_33298352的博客
03-26 862
需要对数据进行函数拟合，首先画一下二维散点图，目测一下大概的分布，所谓正态分布，就是高斯分布，正态曲线是一种特殊的高斯曲线。python的scipy.optimize包里的curve_fit函数来拟合曲线，当然还可以拟合很多类型的曲线。scipy.optimize提供了函数最小值(标量或多维)、曲线拟合和寻找等式的根的有用算法。import numpy as npimport matplotlib...
向上取整和向下取整
06-04 2288
因为要经常用到这两个符号，就保存在这里吧 向上取整,运算称为 Ceiling，用数学符号⌈⌉ （上有起止，开口向下）表示,。 向下取整,运算称为 Floor，用数学符号⌊⌋（下有起止，开口向上）表示。 向上取整：比自己大的最小整数； 向下取整：比自己小的最大整数； 四舍五入：更接近自己的整数；把小数点后面的数字四舍五入即：如被舍去部分的头一位数字小于...
excel向中上/下取整、四舍五入
gr_guhun的博客
01-17 5387
excel向上取整函数 使用excel中的Roundup函数实现向上取整 Roundup函数表示：向上舍入数字，跟四舍五入不一样，不管舍去的首位数字是否大于4，都向前进1 步骤： 1、点击需要向上取整的单元格(将数据向上取整后显示的单元格) 输入：=roundup 函数 2、输入参数，第一个参数：是数据源(需要将哪个数据向上取整)；第二个参数：保留的小数位数(0：不保留小数；1：保留一位小数) ...
向上取整向下取整探讨
wat1r的博客
06-29 8224
符号 向下取整符号：⌊x⌋⌊x⌋⌊x⌋，表示小于等于 xxx 的最大的整数。常用于分数，比如分数的向下取整 ⌊xy⌋⌊\cfrac {x} {y}⌋⌊yx​⌋。 向上取整符号：⌈x⌉⌈x⌉⌈x⌉，与向下取整符号相对，表示大于等于 xxx 的最小的整数。 向上取整 先放结论：左边式子表示aaa对b+1b+1b+1向上取整，右边是取整的算法 ceil(ab+1)ceil(\cfrac {a} {b+1})ceil(b+1a​) = a+bb+1\cfrac {a+b} {b+1}b+1a+b​ 当aaa是
element-plus axios使用jsonp
06-10
JSONP的原理是利用`<script>`标签的跨域特性，在请求中使用一个回调函数名作为参数，服务器端将数据包装在该回调函数中返回，客户端通过该回调函数来获取数据。 使用JSONP时需要注意以下几点： 1. 服务器端需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值